/** * El personaje del asistente — sólo lo que hace falta para ubicarlo. * * @package Media Hub NewsAI * @subpackage com_newsmind * * @copyright (C) 2026 Bruno Invernizzi. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt * * Esta hoja se descarga SÓLO si el medio configuró un personaje —lo decide * chat.php leyendo `ChatHelper::character()`—, así que una instalación sin * personaje no paga ni un byte por ella. El dibujo vive en su propio shadow * DOM y no lo alcanza ninguna regla de acá; lo que se resuelve en este archivo * es dónde va, cuánto mide, y qué le pasa al botón cerrado cuando hay una cara * que mostrar. * * Sirve para las dos clases de personaje: el `` animado y la * `` que sube cada medio. Por eso se llama `character` y no `gaby`. */ /* ========================================================================== EL DIBUJO, EN LOS DOS TAMAÑOS ========================================================================== */ .newsmind-chat__character { display: block; flex: 0 0 auto; } /* * Medio cuerpo en la cabecera del widget incrustado. * * `--nm-character-bust` en vez de un número escrito: el alto de la cabecera * depende de él y tenerlo en un solo sitio es lo que impide que uno de los dos * se ajuste y el otro no. */ /* * `:not(.newsmind-chat--floating)` por el mismo motivo que el contenedor: el * medio cuerpo sólo existe acá. Sin esa exclusión, el alto mínimo de 116 px que * necesita el busto se le aplicaba también a la barra del flotante, y el botón * cerrado con el nombre a la vista medía 128 px de alto — medido — en vez de los * 68 que mide la barra sin personaje. * * Es la segunda vez en esta hoja: una regla pensada para el busto alcanzando al * avatar. Los dos tamaños viven en widgets distintos y las reglas tienen que * decirlo. */ .newsmind-chat--character:not(.newsmind-chat--floating) .newsmind-chat__header { --nm-character-bust: 104px; align-items: flex-end; gap: var(--nm-space-3); min-block-size: calc(var(--nm-character-bust) + var(--nm-space-3)); padding-block-end: 0; } .newsmind-chat__character--bust { inline-size: var(--nm-character-bust, 104px); block-size: calc(var(--nm-character-bust, 104px) * 1.135); } /* * Panel angosto: el medio cuerpo estorba y queda la cabeza. * * Es una consulta de CONTENEDOR y no de pantalla: el mismo widget puede estar * en una columna lateral de 300 px dentro de una pantalla de escritorio, y ahí * lo que manda es el ancho de la columna, no el del dispositivo. La versión que * llegó del diseño usaba `max-width: 480px` de pantalla, que en esa columna no * se activa nunca. */ /* * EL CONTENEDOR, SÓLO EN EL WIDGET INCRUSTADO. Y no es un detalle. * * `container-type: inline-size` obliga a que el ancho del elemento sea * INDEPENDIENTE de su contenido — es lo que permite consultarlo sin que la * consulta se muerda la cola. Y el flotante cerrado hace exactamente lo * contrario desde la 1.58.0: `inline-size: fit-content`, o sea su ancho ES su * contenido. * * Las dos cosas juntas no se pelean: gana el contenedor, y `fit-content` * resuelve a CERO. Medido en Chromium con la hoja puesta: el widget cerrado con * el nombre a la vista quedaba en `width: 0px` con el botón asomando 162 px * fuera —y con `overflow: hidden`, invisible—. No lo avisa nadie: es CSS * válido, sin error de consola, y sólo se ve mirando la caja. * * El medio cuerpo y su reducción a cabeza sólo existen en el widget * incrustado; el flotante usa siempre el avatar. Así que el contenedor va * donde hace falta y en ningún otro sitio. */ .newsmind-chat--character:not(.newsmind-chat--floating) { container-type: inline-size; container-name: newsmind-chat; } @container newsmind-chat (max-width: 480px) { .newsmind-chat--character:not(.newsmind-chat--floating) .newsmind-chat__header { align-items: center; min-block-size: 0; gap: var(--nm-space-2); } .newsmind-chat__character--bust { inline-size: var(--nm-touch); block-size: var(--nm-touch); } } /* Y el avatar del flotante, que es el que va dentro del botón. */ .newsmind-chat__character--avatar { inline-size: var(--nm-touch); block-size: var(--nm-touch); border-radius: 50%; } /* ========================================================================== EL BOTÓN CERRADO ES LA CARA, Y NADA MÁS Con personaje, el icono de globo de diálogo sobra: había dos señales para lo mismo. Se oculta por regla y no quitando el nodo del HTML, porque la regla vale también para el widget que una plantilla vuelva a dibujar. El nombre NO se saca del documento: se esconde a la vista con la misma clase del sistema que usa el resto del producto. Así el botón conserva su nombre accesible —un lector de pantalla sigue oyendo «Gaby»— en vez de quedar como un botón sin nombre, que es el peor de los dos mundos. El medio que prefiera que se lo reconozca sin abrir nada enciende «Mostrar el nombre junto al personaje» en Opciones, y entonces nada de este bloque aplica. ========================================================================== */ .newsmind-chat--character .newsmind-chat__icon { display: none; } /* * Y SE VA SIEMPRE, NO SÓLO CON EL WIDGET CERRADO. * * Con la cara puesta, el nombre escrito al lado es la misma información dos * veces: el personaje ES la identidad del asistente. Antes esto valía sólo * para el botón cerrado, así que el panel abierto y el widget incrustado * seguían mostrando «Gaby» junto al dibujo de Gaby. * * Dos selectores porque el nombre vive en dos sitios: dentro del botón que * abre, en el flotante; y suelto en la cabecera, en el incrustado. * * Se esconde A LA VISTA —la técnica del sistema, con recorte— y no con * `display: none`. En el flotante ese `span` ES el nombre accesible del botón * que abre el asistente: sacarlo del árbol lo dejaría anunciándose como * «botón», sin más. Es más fácil de escribir y es peor que no tocarlo. */ .newsmind-chat--character:not(.newsmind-chat--character-label) .newsmind-chat__toggle > span, .newsmind-chat--character:not(.newsmind-chat--character-label) .newsmind-chat__header > span { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* * Y EL CÍRCULO ES EL WIDGET, NO EL BOTÓN. * * Acá estaba el error de la hoja que llegó: redondeaba el `.newsmind-chat__toggle` * a 64 px, y el que dibuja el fondo, la sombra y el radio es el * `.newsmind-chat` de alrededor. El resultado habría sido un círculo dentro de * un rectángulo redondeado con la barra de marca detrás — no un botón redondo. * * El widget cerrado ya se ajusta a su contenido desde la 1.58.0, así que basta * fijarle las dos medidas y el radio, y quitarle a la cabecera el relleno que * tiene para cuando lleva texto. */ .newsmind-chat--floating.newsmind-chat--character:not(.newsmind-chat--character-label):not(.is-open) { --nm-character-button: 64px; inline-size: var(--nm-character-button); block-size: var(--nm-character-button); border-radius: 50%; } .newsmind-chat--floating.newsmind-chat--character:not(.newsmind-chat--character-label):not(.is-open) .newsmind-chat__header, .newsmind-chat--floating.newsmind-chat--character:not(.newsmind-chat--character-label):not(.is-open) .newsmind-chat__toggle { justify-content: center; padding: 0; block-size: 100%; min-block-size: 0; } /* La cara ocupa el círculo dejando el aro de marca a la vista. */ .newsmind-chat--floating.newsmind-chat--character:not(.newsmind-chat--character-label):not(.is-open) .newsmind-chat__character--avatar { inline-size: 54px; block-size: 54px; } /* * Abierto, el personaje encabeza la conversación y se lo ve. * * 56 px y no 40: abierto hay una cabecera de ancho completo para él solo —el * nombre ya no está al lado— y a 40 px la cara quedaba del tamaño de un icono * en una barra de 80. La cabecera crece a 80 px de alto, que es lo que mide el * dibujo más el relleno que la cabecera ya tenía. */ .newsmind-chat--floating.is-open .newsmind-chat__character--avatar { inline-size: 56px; block-size: 56px; }