/* Inter local (antes Google Fonts). Un solo archivo variable cubre pesos 300-600.
   font-display: block + precarga = el texto no aparece en otra fuente y "salta". */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url("../fonts/inter-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fuente de respaldo con las medidas de Inter: si por algo Inter tarda,
   el espacio que ocupa el texto es casi identico y no hay salto. */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107.4%;
    ascent-override: 90.2%;
    descent-override: 22.48%;
    line-gap-override: 0%;
}
        :root {
            --bg-dark: #212121;
            --sidebar-light: #2d2d2d; 
            --user-msg: #2f2f2f;
            --text-white: #ececec;
            --accent: #3d3d3d;
            /* Espaciado lateral compartido: header, #chat-body y la caja de
               escribir SIEMPRE usan esta misma variable, para que sus bordes
               queden perfectamente alineados en cualquier tamaño de pantalla. */
            --espacio-chat: 1.5rem;
            /* Ancho real de la barra de scroll del navegador (la mide JS una
               sola vez y la guarda acá). #chat-body vive DENTRO de
               #chat-scroll (que es quien tiene el scroll), así que el
               navegador le resta ese ancho automáticamente — el header y la
               caja de escribir están AFUERA de #chat-scroll, así que no lo
               pierden solos y necesitan esta variable a mano para no
               desalinearse. */
            --scrollbar-width: 0px;
        }
        @media (max-width: 600px) {
            :root { --espacio-chat: 0.75rem; }
        }
        html, body {
            height: 100%;
            margin: 0;
            background-color: var(--bg-dark);
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-white);
            font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            height: 100vh;
            height: 100dvh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .fas {
            color: white !important;
        }

        .navbar-custom {
            background-color: var(--bg-dark);
            border-bottom: 1px solid #2a2a2a;
            flex-shrink: 0;
            position: relative;
            z-index: 40;
        }

        .navbar-custom .container {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            /* Gap más chico (era 6px) para acercar el logo a las tres
               líneas -es el único lugar donde este gap se nota, porque del
               otro lado el grupo de botones va con margin-left:auto, mucho
               más grande que este valor-. Aplica en todas las pantallas
               donde aparece el ícono (siempre <992px). */
            gap: 3px;
            /* Bootstrap's .container trae un max-width fijo (540/720/960px)
               centrado desde los 576px hacia arriba, lo que lo separa del
               resto del contenido (que es fluido). Se anula acá para que el
               header ocupe siempre el 100% del ancho real, con el mismo
               padding lateral que el chat. */
            max-width: 100%;
            width: 100%;
            padding: 0 var(--espacio-chat);
            padding-right: calc(var(--espacio-chat) + var(--scrollbar-width));
        }

        .navbar-toggler { flex-shrink: 0; }

        /* ---------------------------------------------------------------
           Jerarquía de tamaños del header (logo, tres líneas, botones):
           se define UNA vez como base para celular, y crece en dos escalones
           (tablet/escritorio y TV/pantallas grandes) más abajo, con
           min-width. Todos los íconos del header mantienen siempre la
           misma proporción entre sí en los tres escalones.
        ----------------------------------------------------------------- */
        .navbar-brand {
            color: white !important;
            font-weight: 600;
            font-size: 1.3rem; /* base: celular */
            display: flex;
            align-items: center;
            gap: 1px;
            flex-shrink: 1;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /* Mantiene la altura del header igual que antes aunque el texto
               ahora se recorte a la altura de las mayúsculas (ver más abajo). */
            min-height: 34px;
        }

        /* ---------------------------------------------------------------
           ALINEACIÓN VERTICAL DEL HEADER (todo sobre una misma recta)
           Problema: cada fuente reparte distinto su espacio arriba/abajo del
           texto y el navegador redondea esas medidas a píxeles enteros, por
           lo que la "tinta" del logo/texto quedaba ~1px más arriba que los
           botones aunque sus cajas estuvieran centradas.
           Solución: (1) el texto se recorta a la altura de las mayúsculas, así
           el centro visual = el centro de la caja, con cualquier fuente; y
           (2) los íconos usan tamaños en px cuyo redondeo da error cero.
           text-box-trim lo soportan Chrome/Edge 133+ y Safari 18.2+; en el
           resto queda el comportamiento anterior (no se rompe nada).
        ----------------------------------------------------------------- */
        @supports (text-box-trim: trim-both) {
            .brand-text,
            .btn-new-chat .label-full,
            .btn-new-chat .label-corto {
                text-box-trim: trim-both;
                text-box-edge: cap alphabetic;
            }
        }

        /* El ícono del logo va del mismo tamaño que el de las tres líneas,
           para que todo el header se lea como un solo bloque uniforme. */
        .navbar-brand i { font-size: 21px; line-height: 1; } /* base: celular (px entero = sin error de redondeo) */

        .navbar-nav {
            gap: 15px; 
        }

        /* padding: 0 a propósito: así el borde IZQUIERDO del ícono de las
           tres líneas cae exactamente sobre el padding del header
           (--espacio-chat), que es la misma recta contra la que se alinea
           el menú desplegable de abajo. */
        .navbar-toggler {
            border: none;
            padding: 0;
            color: #bbb;
            border-radius: 6px;
            font-size: 21px; /* base: celular (px entero = sin error de redondeo) */
            line-height: 1;
            display: flex;
            align-items: center;
            /* flex-start (no center): así el ícono queda pegado al borde
               IZQUIERDO real del botón -que cae sobre --espacio-chat, la
               misma recta que el texto de los chats- en vez de centrado
               dentro de su caja de 1.15em. */
            justify-content: flex-start;
            transition: color 0.2s, background 0.2s;
        }
        /* width: 1.15em fijo (revertido): con width:auto el logo saltaba
           al alternar entre las tres líneas y la X, porque cada glyph mide
           distinto y el botón cambiaba de ancho. Con la caja fija en
           1.15em eso no pasa -el botón siempre mide igual-, y como el
           glyph queda pegado a la IZQUIERDA de esa caja (no centrado),
           tampoco se pierde la alineación con el texto del chat. */
        .navbar-toggler i {
            font-size: inherit;
            line-height: 1;
            width: 0.875em;
            text-align: left;
        }
        /* fa-xmark, a igual font-size que fa-bars, se ve más chico: sus
           trazos diagonales dejan más aire dentro del cuadro em que las
           tres líneas rectas. Se compensa agrandándolo con transform
           (NO con font-size): transform es solo visual, no cambia el
           tamaño real de la caja -a diferencia de font-size, que sí la
           cambiaba porque el width:1.15em de acá arriba se recalcula
           sobre el font-size del propio ícono, ensanchando el botón y
           empujando al logo cada vez que aparecía la X-. Sin animación:
           el cambio entre las tres líneas y la X es instantáneo. */
        .navbar-toggler i.fa-xmark { transform: scale(1.2); }
        .navbar-toggler:focus { box-shadow: none; outline: none; }
        .navbar-toggler:active { background: none; }
        /* Sin fondo gris al pasar el mouse/tocar (antes: background:
           #3a3a3a): solo cambia el color a blanco. */
        .navbar-toggler:hover { color: white; background: none; }

        .nav-link {
            color: #bbb !important;
            font-size: 0.875rem;
            padding: 8px 12px !important;
            transition: 0.2s;
        }
        .nav-link:hover { color: white !important; }

        .btn-new-chat {
            background: #4a4a4a;
            color: white;
            border: 1px solid #666;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.72rem; /* base: celular */
            font-weight: 600;
            transition: 0.3s;
            white-space: nowrap;
            display: flex;
            align-items: center;
            text-decoration: none;
            flex-shrink: 0;
            min-height: 26px; /* misma altura de siempre; ahora fija porque el texto va recortado */
        }

        .btn-new-chat .label-corto { display: none; }

        .btn-new-chat:hover {
            background: #5a5a5a;
            color: white;
        }

        /* Fix del "texto pegado al header": deja aire al hacer scroll hasta
           un mensaje nuevo, para que no quede tapado por el header/menu. */
        .message { scroll-margin-top: 24px; }

        /* Excepción: primer turno de la conversación, cuando la respuesta
           resulta corta (no llena la pantalla). La agrega/quita boss.js en
           finalizarTurno(). Debe coincidir con
           MARGEN_SUPERIOR_ANCLA_PRIMER_TURNO_CORTO de ese archivo. */
        .message.margen-primer-turno-corto { scroll-margin-top: 30px; }

        /* Botones de acción bajo cada mensaje: copiar / editar / rehacer */
        .message-actions {
            display: flex;
            width: 100%;
            gap: 4px;
            margin-top: 4px;
        }
        .message.user .message-actions { justify-content: flex-end; }
        .message.bot .message-actions { justify-content: flex-start; }

        .msg-action-btn {
            background: transparent;
            border: none;
            color: #999 !important;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s;
        }
        .msg-action-btn:hover { background: #333; color: white !important; }
        .msg-action-btn i { color: inherit !important; font-size: 0.78rem; }

        /* Estado activo: leyendo en voz alta, o me gusta / no me gusta marcado */
        .msg-action-btn.activo { color: #ff9f43 !important; }
        .msg-action-btn.activo i { color: #ff9f43 !important; }

        /* Botones "Word" / "PDF" que aparecen bajo una respuesta generada a
           partir de un documento/audio/video leído. Mismo look que los demás
           botones de acción (msg-action-btn), solo con ancho automático para
           poder mostrar la etiqueta de texto junto al ícono. */
        .msg-action-btn-doc {
            width: auto;
            padding: 0 4px;
            border-radius: 14px;
            gap: 5px;
            font-size: 0.72rem;
            font-weight: 600;
        }
        .msg-action-btn-doc i { font-size: 0.7rem; }

        /* Animación de carga "Buscando..." — puntos + texto, 100% nativo
           (CSS puro, sin Bootstrap ni librerías externas). Ahora es un hijo
           MÁS de #chat-body (se crea/borra por JS junto a los mensajes), así
           que hereda automáticamente el mismo ancho y alineación que ellos —
           y, más importante, queda ANTES del colchón de espacio (::after),
           nunca fuera de la pantalla. */
        #loading-indicator-actual { margin: 4px 0 18px; }
        .confirm-buttons {
            display: flex;
            gap: 12px;
            margin: 8px 0 4px;
            flex-wrap: wrap;
        }
        .confirm-buttons .btn-confirm {
            padding: 8px 26px !important;
            border-radius: 24px !important;
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 0.3px;
            background-color: #333 !important;
            border: 1px solid rgba(255,255,255,0.18) !important;
            color: #fff !important;
            transition: background-color 0.15s ease, transform 0.1s ease;
        }
        .confirm-buttons .btn-confirm:hover:not(:disabled) {
            background-color: #454545 !important;
            transform: translateY(-1px);
        }
        /* Bootstrap le pone a .btn un halo azul al enfocar/tocar; se quita
           para que se comporte igual que el resto de los botones del sitio
           (p. ej. los de acción de la IA), que no lo tienen. */
        .confirm-buttons .btn-confirm:focus,
        .confirm-buttons .btn-confirm:focus-visible {
            box-shadow: none !important;
            background-color: #454545 !important;
        }
        .confirm-buttons .btn-confirm:disabled {
            opacity: 0.45;
            cursor: default;
            transform: none;
        }
        /* Botones de "sitios encontrados" (ver crearBotonesSitios() en boss.js).
           Cada uno arma su link recién al tocarlo, nunca antes. */
        .sitios-buscados {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 10px 0 4px;
        }
        .sitio-item { max-width: 100%; }
        /* El título es lo ÚNICO con fondo/caja — a propósito, para que se
           note que ahí es donde se toca para ir a Google. La descripción
           de abajo queda "al aire", igual que el resto del texto del chat. */
        .sitio-titulo-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 20px;
            background-color: #2a2a2a;
            border: 1px solid rgba(255,255,255,0.16);
            color: #fff;
            cursor: pointer;
            margin-bottom: 6px;
            transition: background-color 0.15s ease, transform 0.1s ease;
        }
        .sitio-titulo-btn:hover {
            background-color: #383838;
            transform: translateY(-1px);
        }
        .sitio-titulo-btn .sitio-nombre {
            font-weight: 700;
            font-size: 0.9rem;
        }
        .sitio-titulo-btn i {
            font-size: 0.7em;
            color: #ff9f43;
        }
        .sitio-desc { color: #e4e4e4; }
        .sitio-desc:empty { display: none; }
        .typing-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 0;
        }
        .typing-indicator .dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #999;
            animation: typing-bounce 1.2s infinite ease-in-out;
        }
        .typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
        .typing-indicator .dot:nth-child(3) { animation-delay: 0.3s; }
        .typing-text {
            color: #999;
            font-size: 0.85rem;
            margin-left: 4px;
            white-space: nowrap;
        }
        @keyframes typing-bounce {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-4px); opacity: 1; }
        }

        /* Formato Markdown ligero para las respuestas de la IA */
        /* Jerarquía completa de títulos: # = h1 (título) hasta ###### = h6
           (el nivel más chico), cada uno con su propio tamaño, en vez de que
           todo a partir de "###" se viera igual. */
        .message-content h1.md-heading { font-size: 1.55rem; font-weight: 700; margin: 22px 0 10px; line-height: 1.3; }
        .message-content h2.md-heading { font-size: 1.32rem; font-weight: 700; margin: 20px 0 9px; line-height: 1.3; }
        .message-content h3.md-heading { font-size: 1.15rem; font-weight: 700; margin: 18px 0 8px; }
        .message-content h4.md-heading { font-size: 1.05rem; font-weight: 700; margin: 16px 0 6px; }
        .message-content h5.md-heading { font-size: 0.95rem; font-weight: 700; margin: 14px 0 6px; }
        .message-content h6.md-heading {
            font-size: 0.85rem;
            font-weight: 700;
            margin: 12px 0 5px;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: #b9b9b9;
        }
        /* Si la respuesta empieza directo con un título, que no quede con
           espacio de más arriba (ya lo maneja el padding del mensaje). */
        .message-content h1.md-heading:first-child,
        .message-content h2.md-heading:first-child,
        .message-content h3.md-heading:first-child,
        .message-content h4.md-heading:first-child,
        .message-content h5.md-heading:first-child,
        .message-content h6.md-heading:first-child { margin-top: 0; }
        .message-content p { margin: 0 0 12px; }
        .message-content ul, .message-content ol { margin: 0 0 12px; padding-left: 22px; }
        /* Igual que la última línea de un párrafo (p:last-child de arriba),
           pero para CUALQUIER tipo de bloque: listas, citas, código, tabla
           o imagen. Antes solo el <p> perdía su margen inferior al ser el
           último elemento — por eso una respuesta de la IA que termina en
           un párrafo simple quedaba con los iconos (copiar/leer/like) bien
           pegados al texto, pero una respuesta de palabra clave que termina
           en una lista con viñetas (como las descripciones de "sitios") se
           quedaba con ~12-14px de más antes de los iconos, porque esa regla
           no cubría <ul>/<ol>/<blockquote>/<pre>/<table>/<img>. Con este
           selector genérico, el ÚLTIMO hijo de cualquier .message-content
           (incluida .sitio-desc, que también tiene esta clase) siempre
           pierde su margen inferior, sea cual sea su tipo — así los iconos
           quedan igual de pegados al último texto en todos los casos. */
        .message-content > *:last-child { margin-bottom: 0 !important; }
        .message-content li { margin-bottom: 4px; }
        .message-content strong { font-weight: 700; }
        .message-content em { font-style: italic; }
        .message-content strong em, .message-content em strong { font-weight: 700; font-style: italic; }
        .message-content u { text-decoration: underline; text-underline-offset: 2px; }
        .message-content del { text-decoration: line-through; opacity: 0.75; }
        .message-content mark.md-mark {
            background: rgba(255, 214, 0, 0.28);
            color: inherit;
            padding: 0 3px;
            border-radius: 3px;
        }

        /* Variedad de numerales para listas ordenadas: decimal (por
           defecto), letras minúsculas/mayúsculas, y romanos
           minúsculos/mayúsculos, según el marcador usado en el texto. */
        .message-content ol.md-ol-decimal { list-style-type: decimal; }
        .message-content ol.md-ol-alfa { list-style-type: lower-alpha; }
        .message-content ol.md-ol-alfa-mayus { list-style-type: upper-alpha; }
        .message-content ol.md-ol-romano { list-style-type: lower-roman; }
        .message-content ol.md-ol-romano-mayus { list-style-type: upper-roman; }

        /* Listas de tareas / checklist: - [ ] pendiente, - [x] hecho */
        .message-content ul.md-tasklist { list-style: none; padding-left: 4px; }
        .message-content ul.md-tasklist li.md-task {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        .message-content ul.md-tasklist li.md-task i {
            margin-top: 3px;
            color: #888;
        }
        .message-content ul.md-tasklist li.md-task.md-task-hecha i { color: #3ecf6b; }
        .message-content ul.md-tasklist li.md-task.md-task-hecha span {
            text-decoration: line-through;
            opacity: 0.7;
        }

        /* Citas / destacados (> texto): caja con borde de color, para
           señalizar avisos, notas o frases importantes */
        .message-content .md-quote {
            border-left: 3px solid #ff9f43;
            background: rgba(78, 158, 255, 0.08);
            padding: 10px 14px;
            margin: 0 0 12px;
            border-radius: 0 8px 8px 0;
            color: #d8d8d8;
        }

        /* Código */
        .message-content code {
            background: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: "Courier New", monospace;
            font-size: 0.85em;
        }
        .message-content pre.md-code {
            background: #1e1e1e;
            border: 1px solid #3a3a3a;
            border-radius: 10px;
            padding: 12px 14px;
            margin: 0 0 12px;
            overflow-x: auto;
        }
        .message-content pre.md-code code {
            background: transparent;
            padding: 0;
            font-size: 0.85rem;
            white-space: pre;
        }

        /* Tablas: antes tenían min-width:340px, así que en pantallas
           angostas la tabla se veía obligada a crecer más ancha que el
           propio chat y su borde derecho (y parte del contenido de la
           última columna) quedaba fuera de la vista, sin ningún indicio de
           que hacía falta arrastrar para verlo — daba la sensación de que
           "le faltaba una parte". Con table-layout:fixed la tabla SIEMPRE
           respeta el 100% de ancho disponible (nunca más angosto que el
           chat) y el texto de cada celda se ajusta (word-break) en vez de
           forzar la tabla a expandirse. overflow-x:auto queda solo como
           respaldo para casos extremos (muchísimas columnas). */
        .md-table-wrap { overflow-x: auto; margin: 0 0 14px; -webkit-overflow-scrolling: touch; }
        .message-content .md-table {
            border-collapse: collapse;
            table-layout: fixed;
            width: 100%;
            font-size: 0.9rem;
        }
        .message-content .md-table th,
        .message-content .md-table td {
            border: 1px solid #444;
            padding: 8px 12px;
            text-align: left;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .message-content .md-table th {
            background: #333;
            font-weight: 700;
        }
        .message-content .md-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }

        /* Enlaces de referencia con texto (no solo botón "Visitar") */
        .message-content a.md-link {
            color: #6fb1ff;
            text-decoration: underline;
        }
        .message-content a.md-link i { font-size: 0.7em; margin-left: 2px; }

        /* Imágenes dentro de una respuesta */
        .message-content img.md-image {
            max-width: 100%;
            border-radius: 10px;
            margin: 4px 0 12px;
            display: block;
        }

        .message-content hr.md-hr {
            border: none;
            border-top: 1px solid #444;
            margin: 16px 0;
        }

        @media (max-width: 991px) {
            /* El fondo del menú va de borde a borde (edge to edge), igual que
               el header. El padding horizontal ya NO va acá: lo pone el
               .navbar-nav de adentro, para que los links queden alineados
               exactamente con el mismo margen que #chat-body y .input-wrapper. */
            .navbar-collapse {
                background: var(--sidebar-light);
                position: absolute;
                /* top: 100% en vez de un valor fijo (antes 60px): así el menú
                   arranca EXACTAMENTE donde termina el header, sin quedar
                   despegado hacia abajo aunque cambie la altura del header. */
                top: 100%;
                left: 0;
                right: 0;
                width: 100%;
                z-index: 1000;
                margin-top: 0;
                padding: 8px 0;
                border-bottom: 1px solid #444;
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
            }

            /* Alineación con las tres líneas: el menú ya NO se centra en una
               columna de 800px. Usa el mismo padding lateral del header
               (--espacio-chat) menos los 10px de padding interno del link,
               así el TEXTO de cada opción cae sobre la misma recta vertical
               que el borde izquierdo del ícono de las tres líneas. */
            .navbar-collapse .navbar-nav {
                max-width: 100%;
                width: 100%;
                margin: 0;
                /* padding-left: sube este valor para correr el menú más a la
                   derecha (o bájalo para acercarlo al borde de las tres
                   líneas). padding-right se mantiene igual que antes. */
                padding: 0 calc(var(--espacio-chat) - 10px);
                gap: 2px;
            }

            .navbar-collapse .nav-link {
                padding: 12px 10px !important;
                font-size: 0.95rem;
                border-radius: 8px;
            }

            .navbar-collapse .nav-link:hover {
                background: rgba(255, 255, 255, 0.06);
            }
        }
        #chat-container {
            flex: 1;
            /* Ya NO scrollea acá — ver #chat-scroll más abajo. Este
               contenedor solo reparte el espacio vertical entre el área de
               mensajes y la cajita de escribir (flexbox), para que el
               scroll de los mensajes nunca pueda "meterse" debajo/detrás
               de la cajita, como pasaba antes con el scroll único que
               abarcaba todo #chat-container (input incluido, aunque
               quedara pegado abajo por sticky, el track del scrollbar
               nativo igual recorría esa zona). */
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* Único elemento que scrollea: nace exactamente entre el borde de
           arriba del área de chat y el borde de arriba de la cajita de
           escribir (gracias a que es un item flex y la cajita es el
           siguiente hermano, con su alto natural) — así el scroll llega
           como mucho hasta ahí, ni un pixel más, igual que en Gemini. */
        #chat-scroll {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
        }

        /* Scrollbar fino, redondeado, que se desvanece solo (estilo Gemini):
           invisible por defecto, aparece mientras se scrollea (clase
           "scroll-activo", la pone/saca boss.js) o con el mouse encima en
           desktop, y a los pocos segundos de inactividad vuelve a
           desvanecerse. La transición es más lenta para "salir" (fade out)
           que para "entrar" (fade in), para que no parpadee al scrollear
           seguido pero sí se note el desvanecido al dejar de usarlo. */
        * {
            scrollbar-width: thin;
            scrollbar-color: transparent transparent;
            transition: scrollbar-color 0.6s ease;
        }
        *:hover,
        *.scroll-activo {
            scrollbar-color: #5a5a5a transparent;
            transition: scrollbar-color 0.1s ease;
        }
        *::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        *::-webkit-scrollbar-track {
            background: transparent;
        }
        *::-webkit-scrollbar-thumb {
            background-color: transparent;
            border-radius: 8px;
            border: 2px solid transparent;
            background-clip: padding-box;
            transition: background-color 0.6s ease;
        }
        *:hover::-webkit-scrollbar-thumb,
        *.scroll-activo::-webkit-scrollbar-thumb {
            background-color: #5a5a5a;
            transition: background-color 0.1s ease;
        }
        *::-webkit-scrollbar-thumb:hover,
        *::-webkit-scrollbar-thumb:active {
            background-color: #9a9a9a;
        }

        /* Modo "landing" (sin mensajes aún): todo centrado verticalmente,
           como la página de inicio de Grok — logo, título y caja de texto
           juntos, en el centro de la pantalla. */
        #chat-container.landing {
            justify-content: center;
        }
        /* En landing, #chat-scroll no necesita scroll (todo entra en
           pantalla) y no debe estirarse — así el bloque de bienvenida +
           la cajita quedan centrados juntos, igual que antes.
           OJO: tiene que ser "flex: none" (no solo "flex-grow: 0"). La
           regla base de acá arriba le da "flex: 1", que fija su
           flex-basis en 0%; si acá solo se anula el grow, el flex-basis
           en 0% se queda, y como automatic minimum size de un flex item
           pasa a ser 0 en cuanto tiene overflow distinto de "visible" (acá
           overflow-y:hidden), el elemento termina colapsando a una altura
           real de ~0 en vez de tomar el alto de su contenido — eso era lo
           que hacía que el robot + "PlusChat" no quedaran centrados. */
        #chat-container.landing #chat-scroll {
            flex: none;
            overflow-y: hidden;
        }
        #chat-container.landing #chat-body { flex-grow: 0; }

        /* Modo "chat" (ya hay conversación): mensajes arriba con scroll,
           caja de texto anclada abajo, como cualquier chat normal. */
        #chat-container:not(.landing) {
            justify-content: flex-start;
        }
        /* Antes hacía falta un padding-bottom fijo grande acá (~110px) para
           reservarle un "colchón" a la caja de escribir, porque con
           position:fixed ella vivía afuera del flujo del documento y no
           ocupaba espacio propio. Ahora la cajita es un hermano normal de
           #chat-scroll (ver más abajo) y ya ocupa su propio espacio real
           al final del documento — reservar encima ese padding fijo sumaba
           el espacio dos veces y dejaba un hueco enorme al llegar al final
           del scroll. Solo queda un respiro chico entre el último mensaje
           y la caja. */
        #chat-container:not(.landing) #chat-body { padding-bottom: 12px; }
        /* El colchón de espacio para poder anclar el último turno arriba de
           la pantalla ahora se calcula dinámicamente por JS (#scroll-spacer),
           con el tamaño justo y necesario en cada momento — no un valor fijo
           que deje espacio vacío de sobra al final de la conversación. */
        #scroll-spacer { display: block; }
        /* Ya no hace falta position:sticky: al vivir AFUERA de #chat-scroll
           (el único que scrollea), la cajita queda fija abajo solo por ser
           el siguiente hermano en el flex column — nunca se mueve, y el
           scroll de los mensajes nunca puede llegar a taparla ni a pasar
           detrás suyo. */
        #chat-container:not(.landing) .input-area {
            background: linear-gradient(transparent, var(--bg-dark) 25%);
        }

        #chat-body {
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
            padding: var(--espacio-chat);
        }

        .welcome-section { text-align: center; }
        .welcome-section h1 {
            font-size: 2rem;
            font-weight: 600;
            margin: 4px 0 2px;
        }
        .welcome-sub {
            color: #999;
            font-size: 1rem;
            margin: 0;
        }

        /* Burbujas estilo Gemini: la pregunta del usuario va en una burbuja
           redondeada alineada a la derecha; la respuesta de la IA es texto
           libre sin caja, alineado a la izquierda, igual que Gemini/ChatGPT.
           El mensaje se apila en columna (texto arriba, acciones abajo) para
           que el texto use todo el ancho disponible y copiar/rehacer queden
           siempre debajo de toda la respuesta, nunca pegados al costado. */
        .message { display: flex; flex-direction: column; width: 100%; margin: 18px 0; }
        .message-content { line-height: 1.6; word-wrap: break-word; }

        .message.user {
            align-items: flex-end;
        }
        .message.user .message-content {
            background-color: var(--user-msg);
            padding: 12px 18px;
            border-radius: 20px;
            max-width: 80%;
        }

        .message.bot {
            align-items: flex-start;
        }
        .message.bot .message-content {
            background: transparent;
            padding: 0;
            width: 100%;
        }

        /* ---------- Edición en línea del mensaje del usuario (como Gemini) ----------
           El lápiz ya no manda el texto a la cajita de abajo: convierte la
           propia burbuja en un textarea editable, con "Cancelar" / "Actualizar"
           debajo, en el mismo lugar donde estaba el mensaje. */
        .msg-edit-wrap {
            width: 100%;
            max-width: 80%;
            align-self: flex-end;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .msg-edit-textarea {
            width: 100%;
            background-color: var(--user-msg);
            color: var(--text-white);
            font: inherit;
            line-height: 1.6;
            padding: 12px 18px;
            border-radius: 20px;
            border: 1px solid #ff9f43;
            outline: none;
            resize: none;
            overflow: hidden;
            box-sizing: border-box;
        }
        .msg-edit-actions {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }
        .msg-edit-btn {
            padding: 7px 18px;
            border-radius: 20px;
            border: none;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        .msg-edit-btn.cancelar {
            background: transparent;
            color: var(--text-white);
        }
        .msg-edit-btn.cancelar:hover { background: #3a3a3a; }
        .msg-edit-btn.actualizar {
            background: #ff9f43;
            color: #2b2b2b;
        }
        .msg-edit-btn.actualizar:not(:disabled):hover {
            background: #ffb45f;
        }
        .msg-edit-btn.actualizar:disabled {
            background: #4a4a4a;
            color: #999;
            opacity: 0.7;
            cursor: default;
        }

        .message img.generated-image {
            max-width: 100%;
            width: auto;
            height: auto; /* junto con el max-height que pone boss.js: conserva la proporción */
            border-radius: 12px;
            margin-top: 8px;
            display: block;
        }

        /* Botón de nueva conversación en el header */
        .btn-icon-header {
            background: transparent;
            border: 1px solid #555;
            color: white;
            width: 32px; /* base: celular */
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
        }
        .btn-icon-header:hover { background: #3a3a3a; }
        .btn-icon-header i { color: white !important; font-size: 14px; } /* base: celular */

        * { box-sizing: border-box; }

        .input-area {
            width: 100%;
            padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
            /* Igual que el header (ver .navbar-custom .container): al vivir
               afuera de #chat-scroll ya no recibe gratis el descuento del
               ancho de la barra de scroll, así que se compensa a mano para
               que la cajita quede centrada exactamente igual que los
               mensajes en cualquier tamaño de pantalla. */
            padding-right: var(--scrollbar-width);
            z-index: 30;
        }

        .input-wrapper {
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
            padding: 0 var(--espacio-chat);  /* misma variable que #chat-body, para que los bordes coincidan siempre */
            position: relative;
        }

        .input-pill {
            display: flex;
            flex-wrap: nowrap;      /* nunca deja que el botón de enviar salte de línea */
            align-items: center;
            background: #2f2f2f;
            border: 1px solid #444;
            border-radius: 24px;
            padding: 8px 10px;      /* más aire interno alrededor de los íconos y el texto */
            gap: 8px;
            width: 100%;
        }

        #user-input {
            flex: 1 1 auto;
            min-width: 0;           /* clave: permite que el input se achique en vez de desbordar */
            width: 100%;
            background: transparent;
            border: none;
            color: white;
            padding: 9px 6px;
            outline: none;
            font-size: 16px;        /* evita zoom automático en iOS */
            -webkit-appearance: none;
            resize: none;           /* textarea de una línea: sin tirador */
            overflow: hidden;
            height: 40px;
            line-height: 22px;
            font-family: inherit;
            white-space: nowrap;
        }

        .plus-menu-wrapper { position: relative; flex: 0 0 auto; }

        .plus-icon, .send-icon, .mic-icon {
            flex: 0 0 auto;
            color: white !important;
            width: 34px;
            height: 34px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.2s, transform 0.2s;
        }
        /* El <button> del "+" no hereda font-size (el navegador le pone 13.33px),
           lo que dejaba el "+" ~0.5px arriba. Se fija en 13px (error cero). */
        .plus-icon i { font-size: 13px; }
        .mic-icon, .send-icon { font-size: 16px; }

        /* Avión de enviar: su caja SÍ está centrada, pero la forma es asimétrica
           (punta arriba-derecha, muesca abajo-izquierda) y su masa visual queda
           ~0.09em arriba y a la derecha, por eso se veía descentrado. Se corrige
           óptico: en em, para que escale con el tamaño del botón. */
        .send-icon.fa-paper-plane::before {
            display: block;
            transform: translate(-0.08em, 0.077em);
        }
        .plus-icon, .send-icon { background-color: #444; }
        .plus-icon:hover, .send-icon:hover { background-color: #555; }
        .plus-icon.abierto { transform: rotate(45deg); }
        .send-icon { cursor: pointer; }

        /* Mic: sin fondo en reposo — el círculo solo aparece al tocar/presionar */
        .mic-icon {
            cursor: pointer;
            background-color: transparent;
        }
        .mic-icon:hover,
        .mic-icon:active {
            background-color: #555;
        }

        /* Estado "escuchando": icono rojo con pulso, como el dictado por voz */
        .mic-icon.escuchando {
            background-color: #e53935;
            animation: mic-pulso 1.2s ease-in-out infinite;
        }
        @keyframes mic-pulso {
            0%   { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55); }
            70%  { box-shadow: 0 0 0 10px rgba(229, 57, 53, 0); }
            100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
        }

        /* Navegador sin soporte de dictado por voz: icono atenuado */
        .mic-icon.no-soportado {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Botón "detener respuesta": mismo círculo, pero con icono cuadrado
           y fondo blanco (como el botón de Gemini) mientras se genera texto. */
        .send-icon.fa-stop {
            background-color: #fff;
            color: #212121 !important;
            font-size: 0.7rem;
        }
        .send-icon.fa-stop:hover { background-color: #e6e6e6; }

        .plus-menu {
            display: none;
            position: absolute;
            bottom: 56px;           /* separación entre el menú y la cajita de escribir */
            left: 0;
            background: #2d2d2d;
            border: 1px solid #444;
            border-radius: 12px;
            padding: 6px;
            min-width: 270px;
            max-width: calc(100vw - 32px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.4);
            z-index: 20;
        }
        .plus-menu.abierto { display: block; }

        .plus-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            background: transparent;
            border: none;
            color: white;
            text-align: left;
            padding: 9px 10px;
            border-radius: 8px;
            font-size: 0.82rem;
            transition: background 0.15s;
        }
        .plus-menu-item:hover { background: #3d3d3d; }
        .plus-menu-item { gap: 12px; padding: 9px 10px; }
        .pm-ico {
            flex: 0 0 auto;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: #3a3a3a;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pm-ico svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: #fff;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .pm-txt { display: flex; flex-direction: column; min-width: 0; }
        .pm-titulo { font-size: 0.92rem; font-weight: 600; color: #fff; }
        .pm-desc { font-size: 0.74rem; color: #a8a8a8; line-height: 1.25; margin-top: 2px; }

        .attachment-preview {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #2f2f2f;
            border: 1px solid #444;
            border-radius: 12px;
            padding: 6px;
            margin-bottom: 6px;
            width: fit-content;
        }
        .attachment-preview img {
            width: 48px;
            height: 48px;
            object-fit: cover;
            border-radius: 8px;
        }
        #attachment-remove {
            background: #444;
            border: none;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            flex-shrink: 0;
            transition: background 0.15s;
        }
        #attachment-remove:hover { background: #666; }

        /* Insignia genérica para adjuntos que no son imagen (PDF, Word,
           audio, video): mismo look que el recuadro de la miniatura, pero
           con un ícono + nombre de archivo en vez de una foto. */
        .attachment-file-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 10px 4px 4px;
        }
        .attachment-file-badge i {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: #3d3d3d;
            color: #ff9f43;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            flex-shrink: 0;
        }
        .attachment-file-badge span {
            color: #ddd;
            font-size: 0.8rem;
            max-width: 160px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #modo-indicador {
            font-size: 10px;
            text-align: center;
            margin: 6px 0 0;
            color: #888;
        }

        .btn-primary {
            background-color: #4e4e4e !important;
            border: none !important;
            margin-top: 0px;
            font-size: 0.8rem;
            transition: background-color 0.15s ease, transform 0.1s ease;
        }
        /* El !important de arriba también tapaba el :hover propio de
           Bootstrap, así que este botón (p. ej. "Visitar" dentro de una
           respuesta) se quedaba sin ningún efecto al pasar el mouse. */
        .btn-primary:hover {
            background-color: #5c5c5c !important;
            transform: translateY(-1px);
        }
        .btn-primary:focus {
            box-shadow: none !important;
        }

        /* 680px: el header empieza a apretarse — todo en una sola línea.
           El padding lateral de header/chat-body/input ya lo maneja la
           variable --espacio-chat de forma uniforme; acá solo van ajustes
           de tamaño de fuente e íconos. */
        @media (max-width: 680px) {
            /* El espaciado ya lo maneja --espacio-chat; acá no van tamaños. */
        }

        /* ---------------------------------------------------------------
           Escalón 2 de la jerarquía: tablet y escritorio. Todo el header
           crece un paso manteniendo la misma proporción entre el logo, las
           tres líneas y los botones que en celular.
        ----------------------------------------------------------------- */
        @media (min-width: 681px) {
            .navbar-brand { font-size: 1.25rem; }
            .navbar-brand i { font-size: 22px; }
            .navbar-toggler { font-size: 22px; }
            .btn-new-chat { padding: 7px 15px; font-size: 0.8rem; min-height: 31px; }
            .btn-icon-header { width: 38px; height: 38px; }
            .btn-icon-header i { font-size: 16px; }
        }

        /* 480px: se abrevia el texto del botón para asegurar que quepa todo */
        @media (max-width: 480px) {
            /* Solo se abrevia el TEXTO del botón (mismo tamaño de letra),
               para que siga entrando todo en una línea. */
            .btn-new-chat .label-full { display: none; }
            .btn-new-chat .label-corto { display: inline; }
            .welcome-section h1 { font-size: 1.8rem; }
        }

        /* 380px: máxima compresión en celulares muy chicos (solo tamaños de
           fuente/íconos — el padding lateral sigue siendo 0.75rem uniforme,
           heredado de --espacio-chat desde los 600px) */
        @media (max-width: 380px) {
            /* Solo se recorta el ESPACIO entre elementos, nunca su tamaño */
            .navbar-custom .container { gap: 2px; }
            .navbar-brand { gap: 0px; }
            .btn-new-chat { padding: 7px 10px; min-height: 28px; }
            .input-area { padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
            .plus-icon, .send-icon, .mic-icon { width: 30px; height: 30px; }
            #user-input { padding: 7px 4px; font-size: 16px; }
            .welcome-section h1 { font-size: 1.6rem; }
            .welcome-sub { font-size: 0.9rem; }
        }

        /* Pantallas grandes: TV, monitores anchos — se limita el ancho de
           lectura para que no quede todo estirado de punta a punta. */
        @media (min-width: 1200px) {
            #chat-body, .input-wrapper { max-width: 900px; }
            .welcome-section h1 { font-size: 2.6rem; }
            .welcome-sub { font-size: 1.15rem; }

            /* Escalón 3 de la jerarquía: TV / monitores anchos. Un paso más
               grande que tablet/escritorio, misma proporción entre todos
               los íconos del header. */
            .navbar-brand { font-size: 1.35rem; }
            .navbar-brand i { font-size: 26px; }
            .navbar-toggler { font-size: 26px; }
            .btn-new-chat { font-size: 0.72rem; min-height: 28px; }
            .btn-icon-header { width: 32px; height: 32px; }
            .btn-icon-header i { font-size: 14px; }
        }

/* Menú "+" más compacto en celulares */
@media (max-width: 600px) {
    .plus-menu { min-width: 230px; padding: 4px; }
    .plus-menu-item { gap: 10px; padding: 6px 8px; }
    .pm-ico { width: 34px; height: 34px; border-radius: 10px; }
    .pm-ico svg { width: 19px; height: 19px; }
    .pm-titulo { font-size: 0.8rem; }
    .pm-desc { font-size: 0.66rem; margin-top: 1px; }
}