: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 del
               contenedor con scroll, así que el navegador le resta ese ancho
               automáticamente — el header y la caja de escribir están AFUERA
               de ese contenedor, así que no lo pierden solos. Referenciando
               esta misma variable en ambos, quedan centrados exactamente
               igual que #chat-body, sin tener que ajustar cada uno a mano. */
            --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. */
        .message { scroll-margin-top: 14px; }

        /* 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: 28px;
            height: 28px;
            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.75rem; }

        /* Estado activo: leyendo en voz alta, o me gusta / no me gusta marcado */
        .msg-action-btn.activo { color: #4e9eff !important; }
        .msg-action-btn.activo i { color: #4e9eff !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: #4e9eff;
        }
        .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 p:last-child { margin-bottom: 0; }
        .message-content ul, .message-content ol { margin: 0 0 12px; padding-left: 22px; }
        .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 #4e9eff;
            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;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            -webkit-overflow-scrolling: touch;
        }

        /* Scrollbar fino, redondeado y discreto (estilo Gemini) */
        * {
            scrollbar-width: thin;
            scrollbar-color: #5a5a5a transparent;
        }
        *::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        *::-webkit-scrollbar-track {
            background: transparent;
        }
        *::-webkit-scrollbar-thumb {
            background-color: #5a5a5a;
            border-radius: 8px;
            border: 2px solid transparent;
            background-clip: padding-box;
            transition: background-color 0.2s ease;
        }
        *::-webkit-scrollbar-thumb:hover,
        *::-webkit-scrollbar-thumb:active {
            background-color: #9a9a9a;
        }
        /* En touch (celular), aclarar el thumb mientras se está scrolleando */
        *:hover {
            scrollbar-color: #7a7a7a transparent;
        }

        /* 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;
            overflow-y: hidden;
        }
        #chat-container.landing #chat-body { flex-grow: 0; }
        #chat-container.landing .input-area { position: static; }

        /* 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 que es position:sticky (ver
           .input-area más abajo) sí 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; }
        /* position: sticky en vez de fixed a propósito: así la caja de
           escribir se queda DENTRO del flujo normal de #chat-container
           (es hijo suyo), en lugar de calcularse aparte contra todo el
           viewport. Al ser hijo del mismo contenedor con scroll que
           #chat-body, el navegador le resta automáticamente el mismo
           ancho de la barra de scroll a los dos por igual — así ya no
           puede desalinearse del texto en ningún tamaño de pantalla, sin
           necesitar medir nada por JavaScript. */
        #chat-container:not(.landing) .input-area {
            position: sticky;
            bottom: 0;
            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%;
        }

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