/* ===================================================================== * DALIA — extra (2026-08-24): componentes nuevos del panel de chat. * Para APPEND a cssyapp/dalia.css (o cargar como hoja adicional). * * Contratos (los mismos que dalia.css): * - TODO scoped bajo #daliaPanel: no toca nada fuera de Dalia. * - Ambos temas SOLO con tokens --dt-* (light/dark via [data-bs-theme]). * - Keyframes con prefijo dalia* para no colisionar. * * Contiene: * 1) Revelado por PALABRA de la respuesta (spans .w que inyecta * revealWords() en 165_appDALIA.js): blur→nítido escalonado tipo * ElevenLabs Response. Si hay .w se desactiva la cascada por bloques * de daliaPrint para no animar dos veces. * 2) Reproductor TTS propio (.tts-player, renderTtsPlayer()): pill con * play circular en el degradado IA de la casa (blue→cyan), barra de * progreso con seek y tiempos. * ===================================================================== */ /* -------------------------------------------------------------------- * 1 · Revelado por palabra * -------------------------------------------------------------------- */ #daliaPanel .print-in:has(.w) > * { animation: none; } #daliaPanel .print-in .w { display: inline; animation: daliaWordIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 12ms); } @keyframes daliaWordIn { from { opacity: 0; filter: blur(6px); transform: translateY(2px); } to { opacity: 1; filter: blur(0); transform: none; } } @media (prefers-reduced-motion: reduce) { #daliaPanel .print-in .w { animation: none; } } /* -------------------------------------------------------------------- * 2 · Reproductor TTS * -------------------------------------------------------------------- */ #daliaPanel .tts-player { display: flex; align-items: center; gap: 10px; padding: 8px 12px; max-width: 420px; background: var(--dt-surface-2, var(--dt-surface)); border: 1px solid var(--dt-border); border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } #daliaPanel .tts-play { width: 34px; height: 34px; flex: 0 0 34px; padding: 0; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--dt-blue), var(--dt-cyan)); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter 0.14s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.14s ease; } #daliaPanel .tts-play:hover { filter: brightness(1.1); transform: scale(1.06); box-shadow: 0 2px 10px color-mix(in srgb, var(--dt-cyan) 35%, transparent); } #daliaPanel .tts-play:active { transform: scale(0.96); } #daliaPanel .tts-play:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dt-focus-ring); } #daliaPanel .tts-play svg { width: 16px; height: 16px; fill: currentColor; display: block; } #daliaPanel .tts-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--dt-hover); cursor: pointer; overflow: hidden; } #daliaPanel .tts-player.is-playing .tts-track { background: color-mix(in srgb, var(--dt-cyan) 14%, var(--dt-hover)); } #daliaPanel .tts-progress { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; background: linear-gradient(90deg, var(--dt-blue), var(--dt-cyan)); border-radius: 3px; transition: width 150ms linear; } #daliaPanel .tts-time { flex: 0 0 auto; font-size: 12px; color: var(--dt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } #daliaPanel .tts-player audio { display: none; } /* -------------------------------------------------------------------- * 3 · Streaming limpio + tablas colapsadas (2026-08-24) * -------------------------------------------------------------------- */ /* El cursor parpadeante de .stream-text solo tiene sentido con deltas en vivo; openmcp entrega el texto al done → sobre texto vacío era un punto muerto parpadeando. */ #daliaPanel .msg.is-streaming .stream-text:empty::after { content: none; } /* Sin scroll horizontal del chat: lo ancho scrollea DENTRO de su wrap. */ #daliaPanel #daliaChatMsgs { overflow-x: hidden; } #daliaPanel #daliaChatMsgs .msg .bubble { max-width: 100%; min-width: 0; } #daliaPanel #daliaChatMsgs .msg .bubble > .body { min-width: 0; } /* Tabla de datos colapsada por defecto: meta ("N registros") + boton pequeño "Show table"; al expandir reaparecen filtro/columnas/CSV/pager. */ #daliaPanel .data-table-wrap.collapsed .data-table-host, #daliaPanel .data-table-wrap.collapsed .data-table-pager, #daliaPanel .data-table-wrap.collapsed .data-filter, #daliaPanel .data-table-wrap.collapsed [data-act="toggle-cols"], #daliaPanel .data-table-wrap.collapsed [data-act="csv"] { display: none; } #daliaPanel .data-btn.data-expand { font-size: 11px; padding: 3px 8px; color: var(--dt-muted); border: 1px solid var(--dt-border); border-radius: 6px; background: transparent; cursor: pointer; } #daliaPanel .data-btn.data-expand:hover { color: var(--dt-text); border-color: var(--dt-border-strong); } /* -------------------------------------------------------------------- * 4 · Composer estilo ChatGPT (2026-08-24): iconos fantasma circulares * (altavoz/micro) + boton de enviar circular relleno con el degradado IA. * Solo forma/tamaño/color: los estados de dalia.css (stop en data-sending, * aria-pressed, focus-ring, disabled) siguen intactos. * -------------------------------------------------------------------- */ #daliaPanel .dalia-chat__iconbtn { width: 34px; height: 34px; border-radius: 50%; background: transparent; color: var(--dt-muted); font-size: 16px; transition: color 0.12s ease, background-color 0.12s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1); } #daliaPanel .dalia-chat__iconbtn:hover { color: var(--dt-text); background: var(--dt-hover); transform: scale(1.05); } #daliaPanel .dalia-chat__iconbtn[aria-pressed="true"] { color: var(--dt-cyan); background: color-mix(in srgb, var(--dt-cyan) 12%, transparent); } #daliaPanel .dalia-chat__send { width: 34px; height: 34px; margin-left: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--dt-blue), var(--dt-cyan)); color: #fff; font-size: 16px; box-shadow: 0 2px 8px color-mix(in srgb, var(--dt-blue) 30%, transparent); transition: filter 0.12s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; } #daliaPanel .dalia-chat__send:hover { background: linear-gradient(135deg, var(--dt-blue), var(--dt-cyan)); filter: brightness(1.1); transform: scale(1.06); } #daliaPanel .dalia-chat__send:active { transform: scale(0.94); } /* -------------------------------------------------------------------- * 3) BOTONES CTA del markdown * * Los [Etiqueta](#aibuilder) que escribe el modelo se pintan como botón * (inlineMarkdown →