/* ═══════════════════════════════════════════════════════════════════════════ Aimee — con el estilo de Arc (uiarc.dev) Los tokens (color, tipo, radios, sombras, temas) son los de Arc y vienen de `arc-foundation.css`, que se carga antes. Aimee no usa sus componentes React: reestiliza su propio HTML con esos tokens y con las reglas de Arc. - Superficies planas sobre un borde de 1px. Sin cristal, sin blur y sin degradados de adorno. - Sombra solo en lo que flota (diálogos, menús, la tarjeta del mapa): `--shadow-floating`. - Pesos 400 y 500. Sin mayúsculas forzadas ni `text-shadow`. - El acento solo en lo activo, lo elegido o el dato que importa, y el estado (`--success`, `--warning`, `--danger`) solo para estados de verdad. - El foco: ningún anillo con el ratón; con teclado, el de Arc. TODO VIVE BAJO `#aimee`. Para poder meter Aimee dentro de otro sistema sin que su CSS toque nada de fuera, cada selector empieza por `#aimee`, cada id por `aimee-` y cada @keyframes por `aimee-`. Lo que antes iba en `:root`, `html` o `body` (los tokens, el tema, el fondo, el layout de página) va ahora en el propio contenedor. Una regla nueva sigue el mismo patrón. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tokens: alias sobre Arc ───────────────────────────────────────────────── Los valores los pone `arc-foundation.css` (se carga antes). Aquí solo se traducen los nombres de siempre de Aimee a los papeles de Arc, para que las miles de reglas de abajo cambien de piel sin reescribirse. Una regla nueva usa directamente los tokens de Arc (`--background`, `--foreground`, `--text-secondary`, `--surface-muted`, `--radius-*`, `--shadow-floating`…). `--surface`, `--border`, `--border-strong`, `--accent`, `--danger`, `--success` y `--warning` se llaman igual en Arc y NO se redefinen, salvo `--surface`: en Aimee es el gris de los hovers y la burbuja del usuario, que en Arc es `--surface-muted` (su `--surface` es blanco). El acento es el azul de Arc (`data-accent="blue"` en el HTML) y el tema, el claro. Los valores oscuros llegan solos con `data-theme="dark"`. ──────────────────────────────────────────────────────────────────────────── */ #aimee { /* Superficies */ --bg: var(--background); --bg2: color-mix(in oklab, var(--surface-muted) 50%, var(--background)); --surface: var(--surface-muted); --surface-2: color-mix(in oklab, var(--surface-muted), var(--foreground) 4%); --surface-3: color-mix(in oklab, var(--surface-muted), var(--foreground) 8%); /* Texto */ --text: var(--foreground); --text-mid: var(--text-secondary); --text-dim: var(--text-muted); /* Acento */ --accent-hover: var(--accent-strong); --accent-soft: var(--accent-subtle); --on-accent: var(--accent-foreground); /* «Hay un skill que puede atender esto». Ámbar de la familia de Arc: no puede confundirse con el foco, que usa el acento. */ --dorado: var(--tone-amber); --dorado-soft: color-mix(in oklab, var(--tone-amber) 14%, transparent); /* Par de inversión (botones sólidos) */ --ink: var(--foreground); --on-ink: var(--background); --ink-soft: color-mix(in oklab, var(--foreground) 16%, transparent); /* Semánticos: solo sus tintes; los colores son los de Arc */ --danger-soft: color-mix(in oklab, var(--danger) 10%, transparent); --success-soft: color-mix(in oklab, var(--success) 14%, transparent); /* Gráficas (Highcharts), con los colores de las gráficas de Arc (line-chart y bar-chart de uiarc.dev): - series de una gráfica: la primera en el acento y las demás en gris, `--foreground` al 46 % y al 26 % sobre la superficie; - categorías (un pie, o más de tres series): `--series-1..4`, la paleta categórica de la foundation; - barras de una sola serie: el acento al 62 % sobre la superficie, y en pleno la que se señala; - rejilla en `--border`, eje en `--border-strong` y rótulos en `--text-muted`. app.js los lee y los pasa a rgb antes de dárselos a Highcharts. */ --chart-1: var(--accent); --chart-2: color-mix(in oklab, var(--foreground) 46%, var(--surface)); --chart-3: color-mix(in oklab, var(--foreground) 26%, var(--surface)); --chart-4: var(--series-2); --chart-5: var(--series-3); --chart-bar: color-mix(in oklab, var(--accent) 62%, var(--surface)); --chart-grid: var(--border); --chart-axis: var(--border-strong); --chart-label: var(--text-muted); --chart-tooltip-bg: var(--surface-raised); --chart-tooltip-text: var(--foreground); /* Las tres familias de capacidades del grafo de dispositivos (rosa vieja, aguamarina y azul celeste). Paleta medida para contraste y daltonismo: no se cambia por la de Arc sin volver a validarla. */ --cap-own: #B25C74; --cap-protocol: #2FB89C; --cap-igniter: #1A5FBF; /* Forma de onda de las notas de voz */ --overlay: oklch(0% 0 0 / .32); /* Radios. Los grandes son los de Arc; los dos pequeños quedan para piezas dentro de otra (concéntricos: el de dentro = el de fuera − el padding). */ --r-xs: 8px; --r-sm: 12px; --r-md: var(--radius-control); --r-lg: var(--radius-panel); --r-xl: var(--radius-surface); --r-pill: var(--radius-pill); /* Única sombra permitida: capas flotantes */ --shadow-pop: var(--shadow-floating); /* Tipografía de Arc. `--font-display` (Geist) y `--font-body` (Inter) los define la foundation y leen estos dos ganchos: aquí solo se dice qué familia cargó la página (Google Fonts, 400 y 500) y su respaldo. Geist solo para lo de 30px o más; Inter para todo lo demás. */ --font-geist: 'Geist', 'Geist Variable', system-ui, -apple-system; --font-inter: 'Inter', 'Inter Variable', system-ui, -apple-system; --font: var(--font-body); --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --sidebar-w: 300px; /* Alias de compatibilidad */ --blue: var(--accent); --blue-dim: var(--accent-soft); --blue-glow: transparent; --user-bg: var(--surface); } #aimee[data-theme="dark"] { /* Arc aclara las barras en oscuro para que se lean sobre la superficie. */ --chart-bar: color-mix(in oklab, var(--accent) 76%, var(--surface)); --cap-own: #B85471; --cap-protocol: #2AB79B; --cap-igniter: #4A86E0; --overlay: oklch(0% 0 0 / .6); } /* ── Base ────────────────────────────────────────────────────────────────── */ /* `:where()` deja este reset en especificidad 0, la que tenía el `*` pelado. Con `#aimee *` (1,0,0) pisaría el margin y el padding de MapLibre y Highcharts, que pintan dentro de Aimee y antes le ganaban. */ :where(#aimee *) { margin: 0; padding: 0; box-sizing: border-box; } /* Arc: solo pesos 400 y 500, también en lo que pinta el markdown. Especificidad baja (`:where`) para que cualquier regla propia le gane. */ :where(#aimee) :where(strong, b, th, h1, h2, h3, h4, h5, h6) { font-weight: 500; } :where(#aimee) { letter-spacing: var(--tracking-body); line-height: var(--leading-body); } /* Arc: Geist para los titulares y las cifras de 30px o más, con su tracking y su interlineado. Lo de menos de 30px sigue en Inter. */ #aimee :is(#aimee-welcome h1, .hero-title, .gm-big, .clima-temp strong) { font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: var(--leading-display); } /* Arc: las cifras que cambian o se alinean en columna, con números tabulares. */ #aimee :is(.kpi-valor, .hero-kpi-value, .cost-row-value, .gm-big, .fc-big, .dv-codigo, .clima-temp, .msg-time, .timestamp, .bubble td, .gm-bar-lbl, .agenda-dia-num) { font-variant-numeric: tabular-nums; } /* Arc: toda animación tiene su rama de movimiento reducido. Una sola regla para todas, en vez de una por componente (las de abajo siguen y no estorban). */ @media (prefers-reduced-motion: reduce) { #aimee *, #aimee *::before, #aimee *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* EL SISTEMA NO SE MUEVE EN HORIZONTAL. NUNCA. No es solo una preferencia: en un móvil un desplazamiento lateral accidental deja el composer y los botones fuera de la vista y no hay forma obvia de volver. Se cierra en la raíz, y cada contenedor que sí necesite desplazarse de lado —un bloque de código, una tabla— lo hace dentro de sus propios límites. */ #aimee { background: var(--bg); overflow-x: hidden; max-width: 100%; } #aimee { color: var(--text); font-family: var(--font); /* `dvh` encima de `vh`, y en el móvil la diferencia es todo: `100vh` mide la ventana COMO SI la barra del navegador no estuviera, así que el alto real se queda corto justo lo que mide esa barra y el composer —que va al final de la columna— cae por debajo del pliegue. `dvh` sigue al viewport de verdad, y también cuando sube el teclado. `vh` se deja como respaldo para navegadores sin `dvh`. */ height: 100vh; height: 100dvh; display: flex; flex-direction: row; overflow: hidden; -webkit-font-smoothing: antialiased; } /* El tema Aurora pintaba dos capas de gradiente aquí. Se anulan. */ #aimee::before, #aimee::after { content: none; } /* ── Sidebar toggle ──────────────────────────────────────────────────────── */ #aimee .sidebar-toggle { position: fixed; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text-mid); cursor: pointer; display: grid; place-items: center; z-index: 300; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } #aimee .sidebar-toggle:hover { background: var(--surface); color: var(--text); border-color: var(--border-strong); } #aimee .sidebar-toggle svg { width: 16px; height: 16px; } /* ── Acciones de la aplicación (esquina superior derecha) ──────────────────── Simétricas al botón del historial: misma altura, mismo z-index, la otra esquina. Van fijas al viewport y no dentro del sidebar porque no dependen de la conversación ni de que el historial esté abierto. */ #aimee .top-actions { position: fixed; top: 12px; right: 12px; z-index: 300; display: flex; align-items: center; gap: 6px; } /* Sueltos ahí arriba tienen que ser el MISMO botón que el del historial, no un primo parecido. La piel va entera aquí —borde, centrado, cursor, transición— en vez de heredarla a medias de la cabecera del sidebar, que es de donde venían: el de los tres puntos no estaba en aquella lista y se quedaba sin borde propio, sin centrar y enseñando el resalte del navegador al pulsarlo. */ #aimee .top-actions > button { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text-mid); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } #aimee .top-actions > button:hover { background: var(--surface); color: var(--text); border-color: var(--border-strong); } #aimee .top-actions > button svg { width: 16px; height: 16px; } /* El botón de los tres puntos solo existe en móvil. Se escribe `.top-actions > .top-actions-toggle` y no `.top-actions-toggle` a secas porque la piel de arriba (`.top-actions > button`) ya trae `display: grid` y le ganaría por especificidad: el botón se colaba en escritorio. */ #aimee .top-actions > .top-actions-toggle { display: none; } /* ── Las acciones plegadas (móvil) ─────────────────────────────────────────── Tres botones a la derecha más el del historial a la izquierda no caben en un teléfono: con el historial abierto —que ahí ocupa 300px— se montaban encima. Se pliegan detrás de los tres puntos y bajan en columna al abrirlos. `column-reverse` deja los tres puntos ARRIBA aunque vayan los últimos en el HTML, que es donde tienen que estar: fijos en su sitio, con el resto descolgándose por debajo. */ @media (max-width: 720px) { #aimee .top-actions { flex-direction: column-reverse; align-items: flex-end; gap: 6px; } #aimee .top-actions > .top-actions-toggle { display: grid; } #aimee .top-actions > button:not(.top-actions-toggle) { display: none; } #aimee .top-actions.open > button { display: grid; } /* Abierto se marca exactamente igual que al pasar por encima: mismo fondo y mismo borde. Así el botón nunca cambia de forma, solo de tono. */ #aimee .top-actions.open .top-actions-toggle { background: var(--surface); border-color: var(--border-strong); color: var(--text); } } /* ── Overlay móvil ───────────────────────────────────────────────────────── */ #aimee .sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 99; } #aimee .sidebar-overlay.visible { display: block; } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ #aimee .sidebar { width: 0; min-width: 0; background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: width .25s ease, min-width .25s ease; flex-shrink: 0; z-index: 100; } #aimee .sidebar.open { width: var(--sidebar-w); min-width: var(--sidebar-w); } #aimee .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 14px 52px; border-bottom: 1px solid var(--border); flex-shrink: 0; } #aimee .sidebar-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-dim); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Botones de cabecera del sidebar — misma piel para todos */ #aimee .session-btn, #aimee .new-chat-btn, #aimee .selection-toggle-btn { width: 26px; height: 26px; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--bg); color: var(--text-mid); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } #aimee .session-btn:hover, #aimee .new-chat-btn:hover, #aimee .selection-toggle-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } #aimee .session-btn svg, #aimee .new-chat-btn svg, #aimee .selection-toggle-btn svg { width: 13px; height: 13px; } /* Campana tachada cuando los avisos están silenciados, y apagada de color para que se note de un vistazo que ahí no va a sonar nada. */ #aimee .notify-btn .icon-bell-off { display: none; } #aimee .notify-btn.is-muted .icon-bell { display: none; } #aimee .notify-btn.is-muted .icon-bell-off { display: block; } #aimee .notify-btn.is-muted { opacity: .55; } /* ── Lista de conversaciones ─────────────────────────────────────────────── */ #aimee .conversations-list { flex: 1; overflow-y: auto; padding: 6px; } #aimee .conversations-list::-webkit-scrollbar { width: 3px; } #aimee .conversations-list::-webkit-scrollbar-track { background: transparent; } #aimee .conversations-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); } #aimee .conv-item { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none; border-radius: var(--r-sm); padding: 8px 9px; transition: background .15s; margin-bottom: 2px; } #aimee .conv-item:hover { background: var(--surface); } #aimee .conv-item.active { background: var(--surface-2); } #aimee .conv-item.checked { background: var(--surface-2); } #aimee .conv-checkbox { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; display: none; } #aimee .conv-checkbox.visible { display: block; } #aimee .conv-item-body { flex: 1; min-width: 0; text-align: left; cursor: pointer; } #aimee .conv-title { font-size: var(--text-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; } #aimee .conv-item.active .conv-title { color: var(--text); font-weight: 500; } #aimee .conv-date { font-size: var(--text-xs); color: var(--text-dim); } /* ── Sin leer ──────────────────────────────────────────────────────────────── Rojo y con la cifra: en una lista de catorce conversaciones, un punto sin número no dice si te has perdido un mensaje o quince. Tabular para que no baile al pasar de 9 a 10, y `min-width` para que el globo sea redondo con una cifra y ovalado con tres, en vez de estrecharse. */ #aimee .conv-badge { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #FFFFFF; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 18px; text-align: center; } /* Una conversación con algo sin leer se lee antes que las demás. */ #aimee .conv-item.has-unread .conv-title { font-weight: 500; } /* El mismo aviso, pero sobre el botón que abre el historial: es lo único visible cuando el sidebar está cerrado. Se ancla contra `.sidebar-toggle`, que ya es `position: fixed`. */ #aimee .toggle-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); border: 2px solid var(--bg); color: #FFFFFF; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 12px; text-align: center; pointer-events: none; } #aimee .toggle-badge[hidden] { display: none; } /* En oscuro, --danger es un coral claro pensado para texto sobre fondo negro. Como relleno con letra blanca se queda en 2.8:1, que no se lee. Se invierte: letra casi negra sobre el coral, y sube a 6.7:1. */ #aimee[data-theme="dark"] .conv-badge, #aimee[data-theme="dark"] .toggle-badge { color: #1C0F0D; } #aimee .conv-delete { width: 22px; height: 22px; border-radius: var(--r-xs); border: none; background: none; color: transparent; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background .15s, color .15s; padding: 0; } #aimee .conv-item:hover .conv-delete { color: var(--text-dim); } #aimee .conv-delete:hover { background: var(--danger-soft); color: var(--danger) !important; } #aimee .conv-delete svg { width: 13px; height: 13px; } #aimee .selection-toggle-btn.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); } /* ── Pie del sidebar ─────────────────────────────────────────────────────── */ #aimee .sidebar-footer { padding: 10px; border-top: 1px solid var(--border); display: none; align-items: center; gap: 8px; flex-shrink: 0; } #aimee .sidebar-footer.visible { display: flex; } #aimee .select-all-label { display: flex; align-items: center; gap: 7px; flex: 1; cursor: pointer; font-size: var(--text-xs); color: var(--text-mid); user-select: none; } #aimee .select-all-label:hover { color: var(--text); } #aimee .select-all-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } #aimee .sidebar-footer-btn { padding: 7px 12px; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--bg); color: var(--danger); font-size: var(--text-xs); font-weight: 500; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; } #aimee .sidebar-footer-btn:hover { background: var(--danger-soft); border-color: var(--danger); } #aimee .sidebar-footer-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } /* ── Sesión (pie del sidebar) ──────────────────────────────────────────────── Siempre visible y siempre abajo: `margin-top: auto` la empuja al fondo aunque haya dos conversaciones, para que no quede flotando a media altura. */ #aimee .sidebar-session { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); flex-shrink: 0; } #aimee .sidebar-session-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } /* El nombre puede ser largo y el sidebar es estrecho: se recorta antes que ensanchar nada o empujar el botón fuera. */ #aimee .sidebar-session-name { font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #aimee .sidebar-session-name:empty::before { content: '—'; color: var(--text-dim); } #aimee .sidebar-empty { font-size: var(--text-sm); color: var(--text-dim); text-align: center; padding: 24px 12px; line-height: 1.6; } /* ── Tooltip ─────────────────────────────────────────────────────────────── */ #aimee .tooltip-popup { position: fixed; /* Aparcado arriba a la izquierda hasta que el JS lo coloque. Sin esto se queda al final del flujo, 10px por debajo del pliegue: invisible, pero es la clase de resto que se vuelve un fallo el día que alguien cambie un `overflow`. */ top: 0; left: 0; background: var(--ink); border: none; color: var(--on-ink); font-size: var(--text-xs); font-family: var(--font); font-weight: 500; padding: 5px 10px; border-radius: var(--r-xs); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s; z-index: 9999; } #aimee .tooltip-popup.visible { opacity: 1; visibility: visible; } /* ── Diálogo de confirmación ─────────────────────────────────────────────── */ #aimee .confirm-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 500; display: none; align-items: center; justify-content: center; } #aimee .confirm-overlay.visible { display: flex; } #aimee .confirm-dialog { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; width: 100%; max-width: 340px; margin: 0 16px; box-shadow: var(--shadow-pop); animation: aimee-fadeIn .15s ease; } #aimee .confirm-message { font-size: var(--text-sm); color: var(--text); line-height: 1.5; margin-bottom: 20px; } #aimee .confirm-actions { display: flex; gap: 8px; justify-content: flex-end; } #aimee .confirm-btn { padding: 9px 16px; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--bg); color: var(--text-mid); font-size: var(--text-sm); font-weight: 500; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } #aimee .confirm-btn:hover { background: var(--surface); color: var(--text); } #aimee .confirm-btn.danger { border-color: var(--danger); background: var(--danger); color: #FFFFFF; } #aimee .confirm-btn.danger:hover { background: var(--danger); opacity: .88; } /* ── Área de chat ────────────────────────────────────────────────────────── */ #aimee .chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; position: relative; background: var(--bg); } /* El glow superior desaparece en el tema plano. */ #aimee .chat-area::before { content: none; } /* ── Bienvenida ──────────────────────────────────────────────────────────── */ #aimee #aimee-welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px 20px; text-align: center; animation: aimee-fadeIn .5s ease; overflow-y: auto; position: relative; z-index: 1; } #aimee #aimee-welcome h1 { font-size: clamp(var(--text-3xl), 4.4vw, var(--text-4xl)); /* Light: el saludo cambia en cada recarga (saludos.js) y con 600 se leía como un titular. Inter se carga con el peso 300. */ font-weight: 300; color: var(--text); margin-bottom: 32px; letter-spacing: -.03em; line-height: 1.1; /* Un poco menos ancho que el input (.input-inner, 690px): las frases largas no se salen de los márgenes. saludos.js baja el tamaño hasta que quepan en una línea y, si ni así, las parte en dos líneas equilibradas. */ width: 100%; max-width: 620px; text-wrap: balance; } #aimee #aimee-welcome h1 span { color: var(--text-mid); } /* Aimee, el personaje, donde antes iba el orbe de Lottie. */ #aimee .aimee-welcome { width: 180px; height: 180px; margin: 0 auto 8px; } #aimee .aimee-welcome > .aimee-bot, #aimee .aimee-dock-slot > .aimee-bot { width: 100%; height: 100%; } /* En el chat Aimee no se va: flota arriba en el centro, con su nombre debajo, y los mensajes pasan por detrás (como Muse). Solo ella recibe el puntero; el resto del dock deja pasar los clics al hilo. */ #aimee .aimee-dock { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; pointer-events: none; } #aimee .aimee-dock[hidden] { display: none; } #aimee .aimee-dock-slot { width: 72px; height: 72px; pointer-events: auto; } #aimee .aimee-dock-slot .aimee-glow { filter: blur(14px); } #aimee .aimee-dock-name { margin-top: -12px; padding: 3px 11px; border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 500; color: var(--foreground); background: var(--surface-raised); border: 1px solid var(--border); animation: aimee-fadeIn .4s ease .45s both; } /* ── Mensajes ────────────────────────────────────────────────────────────── */ #aimee #aimee-messages { flex: 1; overflow-y: auto; /* UN CHAT NO SE DESPLAZA EN HORIZONTAL, nunca. `overflow-y: auto` con el eje X en `visible` hace que el navegador convierta la X en `auto` por especificación: cualquier hijo que se pasara de ancho —un hash largo medía 1121px, medido— dejaba el hilo entero desplazable de lado. Se cierra la X aquí como última red, y aparte se arregla la causa: que el contenido quepa (ver .bubble más abajo). */ overflow-x: hidden; overscroll-behavior-y: contain; padding: 96px 0 20px; /* deja sitio a Aimee en el dock */ position: relative; z-index: 1; scroll-behavior: smooth; display: none; } #aimee #aimee-messages::-webkit-scrollbar { width: 4px; } #aimee #aimee-messages::-webkit-scrollbar-track { background: transparent; } #aimee #aimee-messages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); } /* ── Input ───────────────────────────────────────────────────────────────── */ #aimee .input-wrap { width: 100%; padding: 14px 24px 0; position: relative; z-index: 2; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; background: var(--bg); border-top: 1px solid var(--border); } #aimee .input-inner { width: 100%; max-width: 890px; } #aimee .input-box { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 10px 10px 10px 20px; transition: border-color .15s, box-shadow .15s, background .15s; } #aimee .input-box:focus-within { background: var(--bg); border-color: var(--border-strong); } /* Mientras Aimee responde el foco no se pinta de azul. El campo sigue aceptando texto, pero deja de aparentar que el envío está disponible. */ #aimee .input-box.is-thinking:focus-within { border-color: var(--border-strong); box-shadow: none; } /* ── El aviso del precog ───────────────────────────────────────────────────── Mientras se escribe, si Aimee reconoce un skill que puede atender la frase, el canto de arriba del campo se pone dorado. Solo el de arriba: es un aviso, no un estado, y pintar el borde entero competiría con el foco. El `:focus-within` se repite a propósito. El foco reescribe `border-color` de las cuatro caras, así que sin volver a poner el dorado aquí el aviso se apagaría justo al escribir, que es la única vez que se puede ver. Lo mismo con la variante sobre foto, que además cambia el color de foco a `--ink`. Nada de sombras en el texto: el aviso vive en el borde de la caja. */ #aimee .input-box.skill-a-la-vista, #aimee .input-box.skill-a-la-vista:focus-within { border-top-color: var(--dorado); } /* ── El chat fijado a un especialista ──────────────────────────────────────── Las CUATRO caras en verde, y ahí está la diferencia con el aviso del precog de arriba, que sólo pinta el canto superior. Aquel es un aviso —dura lo que dura una frase a medio escribir— y este es un ESTADO: mientras esté encendido, lo que se escriba no va al chat de siempre, va a otro modelo. Un estado que cambia a dónde van tus preguntas tiene que rodear la caja, no asomar por un lado. `--success` y no un verde suelto: es el único verde del sistema y ya significa "esto está activo y funcionando" en el resto de la interfaz. El `:focus-within` se repite por lo mismo que en el aviso del precog: el foco reescribe `border-color` de las cuatro caras, así que sin volver a ponerlo aquí el borde se apagaría justo al escribir, que es cuando más falta hace verlo. Y la variante sobre foto va aparte porque allí el foco es `--ink`, no el acento. Nada de sombras en el texto: el estado vive en el borde de la caja. */ #aimee .input-box.especialista-fijado, #aimee .input-box.especialista-fijado:focus-within { border-color: var(--success); } /* Si además hay un skill a la vista, el canto de arriba sigue siendo dorado: son dos cosas distintas —a dónde va la pregunta y qué se ha reconocido escribiendo— y taparlas la una con la otra perdería información. El dorado va después en el fichero, así que gana en el canto superior por orden de cascada; se repite aquí para que la intención quede escrita y no dependa de dónde esté cada bloque. */ #aimee .input-box.especialista-fijado.skill-a-la-vista, #aimee .input-box.especialista-fijado.skill-a-la-vista:focus-within { border-top-color: var(--dorado); } /* El orbe de Aimee dentro del input. En reposo va desaturado; mientras Aimee consulta la API recupera su color y la animación se reanuda. */ #aimee .aimee-logo { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; /* El orbe es pastel claro: sobre fondo claro hay que oscurecerlo para que se vea, sobre fondo oscuro ya destaca por sí solo. */ filter: grayscale(1) brightness(.72); transition: filter .3s ease; } #aimee[data-theme="dark"] .aimee-logo { filter: grayscale(1) opacity(.8); } #aimee .aimee-logo.is-thinking, #aimee[data-theme="dark"] .aimee-logo.is-thinking { filter: none; } #aimee .aimee-logo svg { width: 100%; height: 100%; display: block; } #aimee textarea { flex: 1; background: none; border: none; outline: none; resize: none; color: var(--text); font-family: var(--font); font-size: var(--text-base); line-height: 1.5; max-height: 120px; min-height: 24px; } #aimee textarea::placeholder { color: var(--text-dim); } #aimee .input-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } #aimee .icon-btn { width: 36px; height: 36px; border-radius: var(--r-pill); border: none; background: none; color: var(--text-mid); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; } #aimee .icon-btn:hover { background: var(--surface-2); color: var(--text); } #aimee .icon-btn svg { width: 18px; height: 18px; } /* ── Botón de micrófono ──────────────────────────────────────────────────── */ #aimee .mic-btn { width: 36px; height: 36px; border-radius: var(--r-pill); border: none; background: none; color: var(--text-mid); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; position: relative; flex-shrink: 0; } #aimee .mic-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); } #aimee .mic-btn svg { width: 18px; height: 18px; } #aimee .mic-btn:disabled { color: var(--text-dim); opacity: .45; cursor: not-allowed; } #aimee .mic-btn.processing { color: var(--accent); opacity: .7; pointer-events: none; } #aimee .send-btn { width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); border: none; cursor: pointer; display: grid; place-items: center; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .1s; flex-shrink: 0; } #aimee .send-btn:hover:not(:disabled) { background: var(--accent-hover); } #aimee .send-btn:active:not(:disabled) { transform: scale(.94); } /* Mientras Aimee responde: gris y sin clic. El relleno apenas separa del input (1.2:1), así que el borde es lo que mantiene el círculo legible. */ #aimee .send-btn:disabled { background: var(--surface-3); border-color: var(--border-strong); color: var(--text-dim); cursor: not-allowed; } #aimee .send-btn svg { width: 16px; height: 16px; } /* ── Sugerencias ─────────────────────────────────────────────────────────── */ #aimee .suggestions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; justify-content: center; } #aimee .suggestion { padding: 9px 16px; background: var(--surface); border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 500; color: var(--text-mid); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } #aimee .suggestion:hover { background: var(--surface-2); color: var(--text); } /* ── Disclaimer ──────────────────────────────────────────────────────────── */ /* Ocupa todo el ancho con un margen lateral que escala con la pantalla. Sin max-width: así el texto usa las líneas que quepan y el footer no crece de alto innecesariamente en pantallas anchas. */ /* El aviso legal, plegado tras su palabra. Desplegado son 74px en un móvil —el 9% de la pantalla— y se lee una vez en la vida; el composer necesita ese sitio más que él. Se pliega en las dos plataformas: en escritorio también era un muro de texto de 8px que nadie leía. */ #aimee .disclaimer-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; } #aimee .disclaimer-toggle { border: none; background: none; padding: 6px 12px 8px; font-family: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--text-dim); cursor: pointer; transition: color .15s; } #aimee .disclaimer-toggle:hover { color: var(--text-mid); } /* Abierto se distingue, para que se vea que ESO es lo que se cierra. */ #aimee .disclaimer-toggle[aria-expanded="true"] { color: var(--text-mid); } #aimee .disclaimer[hidden] { display: none; } #aimee .disclaimer { font-size: var(--text-xs); color: var(--text-dim); text-align: center; width: 100%; padding: 8px clamp(16px, 4vw, 72px) 10px; margin: 0; line-height: 1.5; text-wrap: pretty; } /* ── Mensajes de chat ────────────────────────────────────────────────────── */ #aimee .timestamp { text-align: center; font-size: var(--text-xs); color: var(--text-dim); padding: 20px 0 12px; } #aimee .msg { /* El margen lateral del hilo, en un solo sitio: lo usan el relleno de aquí y el tope del mapa, que tienen que cuadrar. Antes eran dos constantes sueltas y bastaba tocar una para descuadrar el margen derecho. */ --msg-pad: 28px; padding: 6px var(--msg-pad); display: flex; animation: aimee-fadeIn .25s ease; /* 960 y no 760: Aimee contesta con tablas y fichas, y necesita sitio. Va a la par con `.input-inner` (890px): el hilo útil (960 − 2×28) y la caja de escribir quedan alineados igual que antes con 760/690. */ max-width: 960px; margin: 0 auto; width: 100%; } #aimee .msg.user { justify-content: flex-end; } #aimee .msg.assistant { justify-content: flex-start; } #aimee .bubble { max-width: 520px; font-size: var(--text-base); line-height: 1.65; /* `anywhere` y no `break-word`: la diferencia está en el tamaño mínimo que el navegador calcula para la caja. Con `break-word` el mínimo sigue siendo la palabra más larga, así que un token de 60 caracteres ensancha la burbuja igual; con `anywhere` puede partir y la burbuja respeta su ancho. Solo parte cuando no hay otra opción: el texto normal sigue cortando por espacios. */ overflow-wrap: anywhere; } #aimee .msg.user .bubble { background: var(--surface); border: 1px solid transparent; border-radius: var(--r-lg); padding: 12px 18px; color: var(--text); } /* Las respuestas de Aimee van sin burbuja, como en el chat de Arc (blocks/ai-chat): texto sobre el fondo, sin borde ni relleno. Solo la pregunta de la persona lleva globo. Las gráficas (`.chart-bubble`) y los mapas (`.map-bubble`) conservan su caja: lo que se mira es la gráfica, y sin marco se pierde. */ #aimee .msg.assistant .bubble:not(.chart-bubble) { background: transparent; border: none; border-radius: 0; padding: 0; color: var(--text); } /* Listas dentro de burbujas */ #aimee .bubble ul, #aimee .bubble ol { margin: 8px 0; padding-left: 24px; } #aimee .bubble ul ul, #aimee .bubble ol ol, #aimee .bubble ul ol, #aimee .bubble ol ul { margin: 4px 0; } #aimee .bubble li { margin: 4px 0; padding-left: 4px; } #aimee .bubble p { margin: 8px 0; } #aimee .bubble p:first-child { margin-top: 0; } #aimee .bubble p:last-child { margin-bottom: 0; } /* ── Enlaces dentro de la burbuja ──────────────────────────────────────────── Hasta aquí no había ni una regla para `a` dentro del chat, así que las citas de una investigación —«[1]» con su enlace— salían con el azul, el morado de visitado y el subrayado que pone el navegador cuando nadie dice otra cosa: lo único de la pantalla que no pertenecía al sistema. Ahora cada enlace es una pastilla que dice DE DÓNDE sale el dato: el número de la cita y el dominio. El dominio es lo que se recorta cuando no cabe, y no el número, porque el número es la referencia y el dominio es el detalle; la URL entera sigue en el `title`. */ #aimee .bubble a { color: var(--accent); text-decoration: none; } #aimee .bubble a:hover { text-decoration: underline; } #aimee .bubble a.cita { display: inline-flex; align-items: baseline; gap: 5px; max-width: 220px; padding: 0 8px; margin: 0 1px; /* La pastilla es una caja dentro de un párrafo, y sin esto se sienta sobre la línea base en vez de cruzarla: el texto de alrededor queda un pelo alto. Los dos píxeles son la mitad del padding vertical efectivo. */ vertical-align: -2px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--bg); color: var(--text-mid); font-size: .84em; font-weight: 500; line-height: 1.75; text-decoration: none; white-space: nowrap; overflow: hidden; transition: background .15s, border-color .15s, color .15s; } #aimee .bubble a.cita:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); text-decoration: none; } /* Cuando el badge lleva dominio, el número es una referencia de dos o tres caracteres y no se recorta nunca. Cuando va solo, es el texto del enlace y entonces sí: es lo único que hay que encoger. */ #aimee .bubble a.cita .cita-num { flex: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-variant-numeric: tabular-nums; } #aimee .bubble a.cita .cita-num:only-child { flex: 0 1 auto; } /* El punto medio es decoración, no contenido: por eso va en un `::after` y no en el HTML. El `:not(:last-child)` es lo que impide que quede un separador colgando cuando el badge no lleva dominio detrás. */ #aimee .bubble a.cita .cita-num:not(:last-child)::after { content: "·"; margin-left: 5px; color: var(--text-dim); font-weight: 400; } /* El `min-width: 0` es lo que hace que la truncación funcione: sin él un hijo de flex no baja de su tamaño de contenido y el `ellipsis` no llega a pintarse nunca, por mucho `overflow: hidden` que lleve el padre. */ #aimee .bubble a.cita .cita-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } /* Indicador de skill ejecutada — barra de acento a la izquierda. Usa --accent y no un tercer color: el sistema es monocromo + un acento. */ #aimee .msg.assistant .bubble.skill-response { border-left: 2px solid var(--accent); padding-left: 14px; } /* Mensaje de progreso mientras la investigación corre */ /* Animation removed - no pulsing effect */ #aimee .msg.progress-message .bubble { /* No animation */ } /* ── Indicador de modo ───────────────────────────────────────────────────── */ #aimee .mode-indicator { display: flex; align-items: center; gap: 6px; padding: 5px 10px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 500; color: var(--text-mid); width: fit-content; } /* El indicador con un especialista fijado. Mismo componente que los modos de investigación y organización —incluido su × para quitarlo— teñido de verde para que la burbuja y el borde de la caja se lean como una sola cosa. Si fueran de colores distintos habría que aprender que van juntos. */ #aimee .mode-indicator.es-especialista { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface)); } #aimee .mode-indicator.es-especialista .mode-indicator-close { color: var(--success); } #aimee .mode-indicator.es-especialista .mode-indicator-close:hover { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); } /* El nombre del especialista con inicial mayúscula: «Especialista Astrolle». Va en el CSS y no en las cadenas de los idiomas porque el adaptador llega en minúscula desde el backend —es un slug, `^[a-z0-9][a-z0-9_-]*$`— y así vale igual para «specialist {adapter}» en inglés. Acotado a `.es-especialista` a propósito: `.mode-indicator-text` lo comparten investigación y organización, y ahí convertiría «Modo investigación» en «Modo Investigación». */ #aimee .mode-indicator.es-especialista .mode-indicator-text { text-transform: capitalize; } /* Sin color-mix se pierde el tinte del fondo, no la información: el canto y el texto siguen en verde. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { #aimee .mode-indicator.es-especialista { border-color: var(--success); background: var(--surface); } } #aimee .mode-indicator-text { user-select: none; } #aimee .mode-indicator-close { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0; width: 16px; height: 16px; display: grid; place-items: center; border-radius: var(--r-xs); transition: background .15s, color .15s; } #aimee .mode-indicator-close svg { width: 11px; height: 11px; } #aimee .mode-indicator-close:hover { background: var(--surface-2); color: var(--text); } /* ── Menú de modos ───────────────────────────────────────────────────────── */ #aimee .mode-menu { position: absolute; bottom: 100%; left: 20px; width: fit-content; margin-bottom: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px; box-shadow: var(--shadow-pop); z-index: 100; animation: aimee-slideUpFade .2s ease-out; } @keyframes aimee-slideUpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #aimee .mode-menu-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-radius: var(--r-xs); transition: background .15s, color .15s; color: var(--text-mid); font-size: var(--text-sm); font-weight: 500; user-select: none; } #aimee .mode-menu-option:hover { background: var(--surface); color: var(--text); } #aimee .mode-menu-option.mode-menu-option-selected { background: var(--surface-2); color: var(--text); } #aimee .mode-menu-option svg { flex-shrink: 0; opacity: .7; } #aimee .mode-menu-option:hover svg { opacity: 1; } #aimee .mode-menu-option.mode-menu-option-selected svg { opacity: 1; } /* ── Marcas de tiempo y acciones por mensaje ─────────────────────────────── */ #aimee .msg-time { font-size: var(--text-xs); color: var(--text-dim); margin-top: 4px; user-select: none; } #aimee .msg.user .msg-time { text-align: right; } #aimee .msg.assistant .msg-time { text-align: left; } #aimee .action-btn { width: 28px; height: 28px; border-radius: var(--r-xs); border: none; background: none; color: var(--text-dim); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; } #aimee .action-btn:hover { background: var(--surface-2); color: var(--text); } #aimee .action-btn svg { width: 15px; height: 15px; } /* ── Código markdown ─────────────────────────────────────────────────────── */ #aimee .bubble pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; margin: 10px 0 4px; overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--text); } #aimee .bubble code { background: var(--surface); border: 1px solid var(--border); padding: 2px 6px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); /* Un identificador o un hash no tienen espacios por donde partir, y era el peor infractor: 1121px de ancho en una pantalla de 393. */ overflow-wrap: anywhere; word-break: break-all; } #aimee .bubble pre code { background: none; border: none; padding: 0; font-size: inherit; } /* ── Tablas markdown ─────────────────────────────────────────────────────── */ /* El contenedor `.tabla` lo pone el renderer de marked (`configurarMarked`). Él es quien se desplaza y lleva el borde; la tabla sigue siendo una tabla de verdad y por eso sus filas estiran a todo el ancho. Una tabla de cinco columnas no cabe en un teléfono, y sin contenerla era ella la que arrastraba el hilo entero de lado. Hace falta el `nowrap`: sin él las celdas se comprimen hasta partir «Organización» en cuatro líneas —medido— y queda ilegible en vez de desplazable. */ #aimee .bubble .tabla { max-width: 100%; /* Los dos ejes por separado y NUNCA el atajo `overflow`: el atajo escribe los dos, así que un `overflow: hidden` puesto después para redondear las esquinas anulaba el `auto` y la tabla se quedaba cortada sin poder desplazarla. Redondear no necesita el atajo: cualquier `overflow` distinto de `visible` ya recorta contra el `border-radius`. */ overflow-x: auto; overflow-y: hidden; margin: 12px 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); } #aimee .bubble table { width: 100%; white-space: nowrap; border-collapse: collapse; font-size: var(--text-sm); } /* La tabla es lo único que se desplaza dentro de un mensaje y el gesto no se adivina, así que la barra va siempre visible y fina, como la del hilo. Se pinta solo con `::-webkit-scrollbar` y SIN `scrollbar-width`: cuando están las dos, Chrome hace caso a la estándar y en macOS eso devuelve la barra flotante que se esconde sola, que es justo lo que no sirve aquí. */ #aimee .bubble .tabla::-webkit-scrollbar { height: 6px; } #aimee .bubble .tabla::-webkit-scrollbar-track { background: transparent; } #aimee .bubble .tabla::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); } #aimee .bubble thead { background: var(--surface); } #aimee .bubble th { color: var(--text); padding: 10px 14px; text-align: left; font-weight: 500; font-size: var(--text-sm); border-bottom: 1px solid var(--border); } #aimee .bubble td { padding: 10px 14px; color: var(--text-mid); border-bottom: 1px solid var(--border); } #aimee .bubble tbody tr:last-child td { border-bottom: none; } #aimee .bubble tbody tr:hover { background: var(--surface); } /* Ficha técnica: una tabla de dos columnas (un cliente, un contacto…). Sin la cabecera «Campo | Detalle», que en una ficha no dice nada; la etiqueta en tono apagado y el valor en tinta, que es lo que se lee. */ #aimee .bubble .ficha thead { display: none; } #aimee .bubble .ficha td:first-child { width: 38%; color: var(--text-mid); font-size: var(--text-sm); } #aimee .bubble .ficha td:last-child { color: var(--text); font-weight: 500; white-space: normal; } #aimee .bubble .ficha tbody tr:hover { background: none; } /* El título de la ficha es el nombre del registro: pesa más que un h3 corriente. */ /* `inherit` y no `var(--text)`: con el tema oscuro sobre el fondo claro, --text es blanco y el nombre desaparecía sobre la burbuja clara. */ #aimee .bubble h3:has(+ .ficha) { font-size: var(--text-lg); color: inherit; margin: 4px 0 8px; } /* Etiqueta de estado de un registro (etapa, activo, clasificación, tags). La pone `rellenar_variables` en talk/astrolle_mcp.py, nunca el modelo. Junto al título de una ficha o dentro de una celda: por eso alineada al centro de la línea y sin crecer con el h3. Activo en verde, inactivo apagado; el resto, en el acento. */ #aimee .bubble .pastilla { display: inline-block; padding: 0 9px; margin: 0 2px; vertical-align: middle; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--text-xs); font-weight: 500; line-height: 1.8; white-space: nowrap; } #aimee .bubble .pastilla[data-tono="si"] { background: var(--success-soft); color: var(--success); } #aimee .bubble .pastilla[data-tono="no"] { background: var(--surface); color: var(--text-dim); } /* Miniatura de un dato con imagen (opción de un maestro, cápsula). La pone `rellenar_variables` en talk/astrolle_mcp.py junto al nombre, nunca el modelo; al pulsarla abre la imagen entera. Pequeña y en línea: cabe en una lista o en una celda. */ /* GIF de reacción (talk/skills/giphy.py): llega como mensaje propio después del texto y va fuera de la burbuja (`separarTarjetas`), sin burbuja vacía ni botón de copiar. Alto fijo para que el hilo no salte al cargar. */ #aimee .msg-content:has(> .tarjetas-fuera .aimee-gif) > .bubble, #aimee .msg-content:has(> .tarjetas-fuera .aimee-gif) > .msg-actions { display: none; } /* Y el mensaje al que sigue un GIF (un saludo, una broma, «nada pendiente»), tampoco: no suelen ser para copiar (pedido del usuario). En vivo lo marca `con_gif` desde que llega; al recargar el historial, el GIF de al lado. Con un tablero de KPIs (la celebración de metas) sí se deja: ahí hay datos. */ #aimee .msg.assistant.con-gif:not(:has(.kpis)) .msg-actions, #aimee .msg.assistant:has(+ .msg.assistant .aimee-gif):not(:has(.kpis)) .msg-actions { display: none; } #aimee img.aimee-gif, #aimee .aimee-gif img { display: block; height: 160px; width: auto; max-width: 100%; border-radius: var(--r-sm); } /* Un sticker (preguntas triviales: «¿me amas?») trae fondo transparente: sin esquinas, y un poco más pequeño. */ #aimee .gif[data-sticker] img.aimee-gif { height: 140px; border-radius: 0; } /* Los GIFs guardados en el historial antes de quitar el enlace a GIPHY lo llevan en su HTML: se anula aquí para que tampoco abran GIPHY. */ #aimee a.aimee-gif { display: inline-block; line-height: 0; pointer-events: none; cursor: default; } #aimee .bubble .dato-imagen { display: inline-block; vertical-align: middle; margin: 2px 4px; line-height: 0; } /* En una lista, la miniatura flota a la izquierda y el texto va a su derecha aunque ocupe varias líneas: en línea con el texto, cada miniatura caía en una columna distinta según lo largo del nombre (problems/1.png del MCP). Sin viñeta: la imagen hace de viñeta. */ #aimee .bubble li:has(.dato-imagen) { display: flow-root; list-style: none; margin: 0 0 10px -1.1em; } #aimee .bubble li .dato-imagen { float: left; margin: 0 12px 0 0; } #aimee .bubble .dato-imagen img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--surface); } /* Un teléfono, como en un input de teléfono: bandera, separador y número. Lo monta `conTelefonos` en app.js y abre WhatsApp. Cifras tabulares para que los grupos se lean alineados. NADA de colores del tema: con el tema oscuro sobre el fondo claro, `--bg` es negro y la caja salía negra con letra oscura encima. Fondo transparente y borde sacado del color del texto de la burbuja: se ve igual de bien en cualquier tema. */ #aimee .bubble a.tel { display: inline-flex; align-items: center; gap: 7px; padding: 1px 10px 1px 8px; margin: 0 1px; vertical-align: middle; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 8px; background: transparent; color: inherit; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.7; text-decoration: none; white-space: nowrap; transition: border-color .15s; } #aimee .bubble a.tel:hover { border-color: var(--success); text-decoration: none; } #aimee .bubble a.tel .tel-bandera { padding-right: 7px; border-right: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: 1.05em; line-height: 1; } /* ── Encabezados markdown ────────────────────────────────────────────────── */ #aimee .bubble h1 { font-size: var(--text-lg); font-weight: 500; color: var(--text); margin: 14px 0 8px 0; line-height: 1.4; letter-spacing: -.01em; } #aimee .bubble h2 { font-size: var(--text-base); font-weight: 500; color: var(--text); margin: 12px 0 6px 0; line-height: 1.4; letter-spacing: -.01em; } #aimee .bubble h3 { font-size: var(--text-base); font-weight: 500; color: var(--text-mid); margin: 10px 0 6px 0; line-height: 1.4; } #aimee .bubble h4, #aimee .bubble h5, #aimee .bubble h6 { font-size: var(--text-sm); font-weight: 500; color: var(--text-mid); margin: 8px 0 4px 0; line-height: 1.4; } /* ── Widget interactivo ──────────────────────────────────────────────────── */ #aimee .ask-widget { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; max-width: 420px; } #aimee .ask-titulo { font-size: var(--text-sm); color: var(--text); margin-bottom: 12px; line-height: 1.5; font-weight: 500; } #aimee .ask-options { display: flex; flex-direction: column; gap: 6px; } #aimee .ask-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; transition: background .15s, border-color .15s; text-align: left; } #aimee .ask-option:hover { background: var(--surface-2); } #aimee .ask-option.selected { border-color: var(--accent); background: var(--accent-soft); } #aimee .ask-option-label { font-size: var(--text-sm); color: var(--text); font-weight: 500; } #aimee .ask-option-sub { font-size: var(--text-xs); color: var(--text-dim); } #aimee .ask-input-row { display: flex; gap: 8px; margin-top: 4px; } #aimee .ask-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; color: var(--text); font-size: var(--text-sm); font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } #aimee .ask-input:focus { background: var(--bg); border-color: var(--border-strong); } #aimee .ask-submit { background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--r-sm); padding: 10px 16px; font-size: var(--text-sm); font-weight: 500; font-family: inherit; cursor: pointer; transition: background .15s; } #aimee .ask-submit:hover { background: var(--accent-hover); } #aimee .ask-cancel { font-size: var(--text-xs); color: var(--text-dim); background: none; border: none; cursor: pointer; margin-top: 10px; padding: 0; font-family: inherit; } #aimee .ask-cancel:hover { color: var(--text); } #aimee .ask-widget.done { opacity: .5; pointer-events: none; } /* ── Aprobación: el «needs-input» del agent-status de Arc ────────────────────── Lo que Aimee propone y espera que digas sí o no, en una píldora y no en una caja: orbe con su anillo, la pregunta, los segundos si se activa sola y los dos botones dentro. Trasladado de `agent-status.module.css` (Arc, Pro): 38 px por dentro de un borde de 1, radio 20, orbe de 24 y botones de 30 con radio 15, concéntricos con la píldora. */ #aimee .ask-widget.ask-status { background: none; border: 0; border-radius: 0; padding: 0; max-width: 100%; align-self: flex-start; } #aimee .ask-status-pill { /* Se parte sola, sin container query: con `container-type` el widget no tiene ancho propio y, dentro de la burbuja, se aplastaba a una palabra por línea. Ahora va en una fila mientras quepa, y si no, los botones bajan a la segunda y la pregunta no se corta. */ display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 8px; max-width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 7px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); font-size: var(--text-sm); line-height: 20px; color: var(--foreground); } /* El icono de lo que se aprueba, pegado a la pregunta (6 px, como el labelIcon de Arc). */ #aimee .ask-status-icon { flex: none; width: 16px; height: 16px; margin-right: -2px; stroke: var(--text-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #aimee .ask-status-label { flex: 1 1 10em; min-width: 0; padding-block: 9px; } #aimee .ask-status-timer { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } #aimee .ask-acciones { display: flex; flex: none; align-items: center; gap: 4px; margin-left: auto; padding-block: 4px; } #aimee .ask-descartar, #aimee .ask-aprobar { height: 30px; padding: 0 12px; border-radius: 15px; font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } /* El que no se puede deshacer va en el acento y el otro queda discreto: la diferencia de peso es la que evita que se apruebe un envío por inercia. */ #aimee .ask-aprobar { background: var(--accent); color: var(--accent-foreground); border: 1px solid var(--accent); } #aimee .ask-aprobar:hover { background: var(--accent-hover); border-color: var(--accent-hover); } #aimee .ask-descartar { background: var(--surface); color: var(--foreground); border: 1px solid var(--border); } #aimee .ask-descartar:hover { background: var(--surface-muted); } /* El orbe: anillo de fondo, el arco que se vacía con la cuenta atrás, el punto de acento que pide atención (un solo «ping») y los glifos del final. */ #aimee .ask-status-orb { position: relative; display: grid; flex: none; width: 24px; height: 24px; place-items: center; } #aimee .ask-status-orb > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke-width: 1.5; } #aimee .ask-status-track { stroke: var(--border); } #aimee .ask-status-arc { stroke: var(--accent); stroke-linecap: round; opacity: 0; stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 12px 12px; } #aimee .ask-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: relative; } #aimee .ask-status-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); animation: aimee-ask-ping .9s var(--ease-standard) .1s 1 both; } #aimee .ask-status-check, #aimee .ask-status-stop { display: none; } #aimee .ask-status-check { position: absolute; width: 14px; height: 14px; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #aimee .ask-status-stop { width: 8px; height: 8px; border-radius: 2px; background: var(--text-secondary); } /* Se activa sola: el arco se vacía en el mismo plazo que cuenta el servidor. El desfase negativo lo pone en su punto si el mensaje llegó con retraso. */ #aimee .ask-status.contando .ask-status-arc { opacity: 1; animation: aimee-ask-vaciar var(--cuenta, 10s) linear var(--cuenta-desde, 0s) forwards; } /* Resuelta. Aprobada: el anillo se cierra en verde y sale el check. Descartada: el cuadrito gris. Activándose sola: el anillo gira y la frase brilla. */ #aimee .ask-status.done { opacity: 1; pointer-events: none; } #aimee .ask-status.done .ask-acciones { display: none; } #aimee .ask-status.done .ask-status-label { flex: 0 1 auto; } #aimee .ask-status.done .ask-status-pill { padding-right: 14px; } #aimee .ask-status.done[data-state="needs-input"] { opacity: .5; } #aimee .ask-status:is([data-state="done"], [data-state="stopped"]) .ask-status-dot { display: none; } #aimee .ask-status[data-state="done"] .ask-status-track { stroke: var(--success); } #aimee .ask-status[data-state="done"] .ask-status-check { display: block; } #aimee .ask-status[data-state="stopped"] .ask-status-stop { display: block; } #aimee .ask-status[data-state="stopped"] .ask-status-label { color: var(--text-secondary); } #aimee .ask-status[data-state="working"] .ask-status-dot { display: none; } #aimee .ask-status[data-state="working"] .ask-status-arc { opacity: 1; stroke: var(--foreground); stroke-dasharray: 25 75; stroke-dashoffset: 0; animation: aimee-ask-girar .9s linear infinite; } #aimee .ask-status[data-state="working"] .ask-status-label { --shimmer-base: color-mix(in oklab, var(--foreground) 50%, var(--surface)); color: transparent; background-image: linear-gradient(90deg, var(--shimmer-base) 0%, var(--shimmer-base) 38%, var(--foreground) 50%, var(--shimmer-base) 62%, var(--shimmer-base) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: aimee-ask-shimmer 2.4s var(--ease-in-out) infinite; } /* El detalle va primero y es el mensaje de Aimee: la misma burbuja que sus respuestas (`.msg.assistant .bubble`), y la píldora debajo (pedido del usuario: primero el mensaje, luego la confirmación). Es lo que se revisa antes de decir sí. pre-line porque llega con saltos de línea del backend (destinatario, asunto, texto). Un correo largo rueda en vez de empujar la píldora fuera de la vista. */ #aimee .ask-detalle { white-space: pre-line; overflow-wrap: anywhere; max-width: 520px; max-height: 260px; overflow-y: auto; margin: 0 0 10px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); color: var(--text); font-size: var(--text-base); line-height: 1.65; } #aimee .ask-status-aviso { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @keyframes aimee-ask-vaciar { to { stroke-dashoffset: 100; } } @keyframes aimee-ask-girar { to { transform: rotate(270deg); } } @keyframes aimee-ask-ping { from { opacity: .4; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } } @keyframes aimee-ask-shimmer { 0% { background-position: 100% 0; } 72%, 100% { background-position: 0% 0; } } /* Sin movimiento para quien lo ha pedido. Los segundos siguen a la vista. */ @media (prefers-reduced-motion: reduce) { #aimee .ask-status.contando .ask-status-arc, #aimee .ask-status[data-state="working"] .ask-status-arc { animation: none; } #aimee .ask-status-dot::after { display: none; } #aimee .ask-status[data-state="working"] .ask-status-label { animation: none; background: none; color: var(--foreground); } } /* ── Respuestas HTML ─────────────────────────────────────────────────────── */ #aimee .bubble.html-response { padding: 0; overflow: hidden; background: transparent; border: none; } #aimee .html-response .html-body { padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text); } #aimee .html-response table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } #aimee .html-response th { background: var(--surface); color: var(--text); padding: 8px 12px; text-align: left; font-weight: 500; font-size: var(--text-xs); border-bottom: 1px solid var(--border); } #aimee .html-response td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-mid); vertical-align: top; } #aimee .html-response tr:last-child td { border-bottom: none; } #aimee .html-response tr:hover td { background: var(--surface); } #aimee .html-response ul, #aimee .html-response ol { margin: 8px 0; padding-left: 20px; } #aimee .html-response li { padding: 4px 0; color: var(--text-mid); } #aimee .html-response h3, #aimee .html-response h4 { color: var(--text); margin: 0 0 10px; font-size: var(--text-sm); font-weight: 500; } #aimee .html-response p { margin: 6px 0; } /* ── Botón de abrir reporte ──────────────────────────────────────────────── */ #aimee .report-open-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 14px; background: var(--ink); color: var(--on-ink); border: none; border-radius: var(--r-xs); font-size: var(--text-sm); font-weight: 500; font-family: inherit; cursor: pointer; transition: opacity .15s; } #aimee .report-open-btn:hover { opacity: .85; } /* ── Lottie ──────────────────────────────────────────────────────────────── */ /* El orbe conserva su color original: es la única pieza de marca con color propio y funciona como punto focal de la bienvenida. */ #aimee .lottie-loading { width: 60px; height: 30px; } /* Lo que Aimee va diciendo mientras piensa (mostrarEstado en app.js): una línea pequeña junto a los puntos, que no compite con la respuesta. Hereda el color de la burbuja y solo lo apaga, así vale con fondo y sin él. */ #aimee #aimee-typing .bubble { display: flex; align-items: center; gap: 10px; } #aimee #aimee-typing .lottie-loading { flex: none; } #aimee .typing-status { font-size: var(--text-sm); font-style: italic; opacity: 0; transition: opacity .25s ease; } #aimee .typing-status.visible { opacity: .6; } /* Las respuestas ya no llevan avatar: el mensaje arranca en el margen. */ /* Aimee tiene más sitio que el usuario: el 70 % del hilo, y nunca menos de los 560px de antes (en una ventana estrecha el 70 % sería MENOS). La burbuja llena ese ancho; la del usuario se queda en sus 520px. */ #aimee .msg.assistant > div { display: flex; align-items: flex-start; max-width: max(70%, 560px); } /* Solo en escritorio: por debajo de 900px mandan los topes de móvil de siempre. */ @media (min-width: 901px) { #aimee .msg.assistant .bubble { max-width: none; } } /* TRANSFERENCIA — `min-width: 0` NO es decorativo, y quitarlo rompe el margen derecho del móvil. Un hijo flex no baja por defecto de su tamaño mínimo de contenido, y el mapa lo tiene grande sin que se note: su caja lleva `aspect-ratio: 16/10` con `min-height: 300px`, y eso IMPLICA un ancho mínimo de 480px (300 × 1.6). En un teléfono de 393px eso empujaba el mensaje a 482px de ancho: quedaba con su margen a la izquierda y 103px por fuera a la derecha. Con `min-width: 0` el contenedor puede encogerse hasta el ancho real y el mapa se adapta; el `min-height` sigue mandando en el alto. */ #aimee .msg-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } #aimee .msg-actions { display: flex; gap: 4px; margin-top: 6px; padding-left: 4px; margin-bottom: 4px; } #aimee .typing-dots { display: flex; gap: 5px; align-items: center; padding: 10px 0; } #aimee .typing-dots span { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--text-dim); animation: aimee-bounce 1.2s infinite; } #aimee .typing-dots span:nth-child(2) { animation-delay: .2s; } #aimee .typing-dots span:nth-child(3) { animation-delay: .4s; } @keyframes aimee-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } } #aimee .error-text { color: var(--danger); font-size: var(--text-sm); padding: 6px 0; } /* ── Nota de voz ───────────────────────────────────────────────────────────── Reproductor propio: píldora con play, forma de onda y duración. Sustituye al