: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', -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: 6px;
            /* 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; }

        .navbar-brand {
            color: white !important;
            font-weight: 600;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 1;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .navbar-nav {
            gap: 15px; 
        }

        .navbar-toggler {
            border: none;
            padding: 0;
            color: #bbb;
            border-radius: 6px;
            transition: color 0.2s, background 0.2s;
        }
        .navbar-toggler:focus { box-shadow: none; outline: none; }
        .navbar-toggler:hover { color: white; background: #3a3a3a; }

        .nav-link {
            color: #bbb !important;
            font-size: 0.85rem;
            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 14px;
            border-radius: 8px;
            font-size: 0.72rem;
            font-weight: 600;
            transition: 0.3s;
            white-space: nowrap;
            display: flex;
            align-items: center;
            text-decoration: none;
            flex-shrink: 0;
        }

        .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; }

        /* 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 */
        .message-content h3.md-heading { font-size: 1.3rem; font-weight: 700; margin: 18px 0 8px; }
        .message-content h4.md-heading { font-size: 1.1rem; font-weight: 700; margin: 16px 0 6px; }
        .message-content h5.md-heading { font-size: 1rem; font-weight: 700; margin: 14px 0 6px; }
        .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: scroll horizontal propio para que nunca rompan el ancho
           del chat en pantallas angostas */
        .md-table-wrap { overflow-x: auto; margin: 0 0 14px; }
        .message-content .md-table {
            border-collapse: collapse;
            width: 100%;
            min-width: 340px;
            font-size: 0.9rem;
        }
        .message-content .md-table th,
        .message-content .md-table td {
            border: 1px solid #444;
            padding: 8px 12px;
            text-align: left;
        }
        .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: 60px;
                left: 0;
                right: 0;
                width: 100%;
                z-index: 1000;
                padding: 10px 0;
                border-bottom: 1px solid #444;
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
            }

            /* Mismo ancho máximo y mismo padding lateral que #chat-body /
               .input-wrapper (20px, max-width 800px) para que el borde
               izquierdo de los links coincida siempre con el borde
               izquierdo del contenido del chat, a cualquier ancho. */
            .navbar-collapse .navbar-nav {
                max-width: 800px;
                width: 100%;
                margin: 0 auto;
                padding: 0 20px;
                gap: 2px;
            }

            .navbar-collapse .nav-link {
                padding: 12px 10px !important;
                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%;
            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: 34px;
            height: 34px;
            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: 0.85rem; }

        * { 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;
        }

        .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;
        }
        .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: 42px;
            left: 0;
            background: #2d2d2d;
            border: 1px solid #444;
            border-radius: 12px;
            padding: 6px;
            min-width: 180px;
            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 i { width: 16px; color: #bbb !important; }

        .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; }

        #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) {
            .navbar-brand { font-size: 1rem; }
            .btn-new-chat { padding: 5px 10px; font-size: 0.68rem; }
            .btn-icon-header { width: 30px; height: 30px; }
        }

        /* 480px: se abrevia el texto del botón para asegurar que quepa todo */
        @media (max-width: 480px) {
            .navbar-brand span:not(.fas):not(.fa-brands) { font-size: 0.95rem; }
            .btn-new-chat .label-full { display: none; }
            .btn-new-chat .label-corto { display: inline; }
            .btn-new-chat { padding: 5px 9px; }
            .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) {
            .navbar-custom .container { gap: 4px; }
            .navbar-brand { font-size: 0.9rem; gap: 5px; }
            .btn-new-chat { padding: 4px 7px; font-size: 0.6rem; }
            .btn-icon-header { width: 28px; 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; }
        }