/* ============================================================ chatbot-fullscreen.css — Modo enfoque (pantalla completa) del chatbot general (AI Analyst del feed). [2026-06-12] Archivo NUEVO — chatbot-chat.css está al borde del umbral rojo Anti-Monolith y NO debe crecer. Todo el modo enfoque vive aquí. Activación (publicChatStore.chatExpanded = true): - body.chat-fullscreen (junto a body.chat-open) - #chat-sidebar.chat-sidebar--fullscreen Principio de reversión limpia: el feed subyacente NO se altera — el sidebar solo lo CUBRE (overlay 100vw). Al contraer, el sidebar vuelve a su ancho y el feed reaparece intacto, sin layout shift. Paleta: escala violeta de marca rgba(124,77,255,*) sobre oscuros. ============================================================ */ /* ── Toggle expandir/contraer (header del chat) ────────────────────── Botón hermano del .chat-close. Hover violeta (no rojo: expandir no es destructivo). Tooltip de marca via [data-dash-tip] (research.css, cargado global en index.html) con .dash-tip-below porque el botón vive pegado al borde superior del viewport. */ .chat-expand-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 4px; background: none; border: none; border-radius: 8px; color: var(--text-dim); cursor: pointer; transition: color 0.2s, background 0.2s; } .chat-expand-toggle:hover { color: #c4b5fd; background: rgba(124, 77, 255, 0.12); } /* Solo desktop: bajo ~900px el sidebar ya ocupa todo el viewport. */ @media (max-width: 900px) { .chat-expand-toggle { display: none !important; } } /* ── Transición compuesta del sidebar ──────────────────────────────── El sidebar base (chatbot-fab.css) solo transiciona transform (open/ close). Componemos width/min-width/height para que la expansión a 100vw sea un solo movimiento fluido (~350ms, ease-out suave) sin pisar la transición de apertura. `.no-anim` (primer montaje) sigue ganando por su !important. */ #chat-sidebar.chat-sidebar { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.33, 1, 0.68, 1), min-width 0.35s cubic-bezier(0.33, 1, 0.68, 1), height 0.35s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.35s ease, border-color 0.35s ease; } /* ── Atmósfera: lienzo oscuro con degradado radial sutil ───────────── Pintada en un ::before persistente con fade de opacity (los gradientes no interpolan; la opacidad sí). z-index:-1 lo deja sobre el fondo sólido #0e0e12 del sidebar pero debajo de todo el contenido. */ .chat-sidebar::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at top, rgba(124, 77, 255, 0.08), transparent 60%), radial-gradient(ellipse at 85% 100%, rgba(91, 58, 214, 0.06), transparent 55%); opacity: 0; transition: opacity 0.45s ease; } .chat-sidebar--fullscreen::before { opacity: 1; } /* ── Layout expandido ──────────────────────────────────────────────── --chatfs-gutter usa 100% (ancho del containing block, no 100vw): se re-resuelve en CADA frame de la animación de width, así la columna de lectura permanece centrada DURANTE la transición en lugar de saltar al gutter final. */ .chat-sidebar.chat-sidebar--fullscreen { /* Columna de lectura: aprovecha el ancho disponible (antes 860px fijo dejaba mucho lienzo vacío en monitores anchos) pero con tope para no degradar la legibilidad en líneas larguísimas. min(): 1180px en pantallas grandes, 84vw en intermedias. */ --chatfs-col: min(1180px, 84vw); --chatfs-gutter: max(28px, calc((100% - var(--chatfs-col)) / 2)); width: 100vw; min-width: 100vw; height: 100vh; border-left-color: transparent; box-shadow: none; } /* Columna de lectura centrada + scrollbar fina violeta (mismo patrón que el panel de insights del FAB en chatbot-fab.css). */ .chat-sidebar--fullscreen .chat-messages { padding: 40px var(--chatfs-gutter) 36px; gap: 22px; scrollbar-width: thin; scrollbar-color: rgba(124, 77, 255, 0.3) transparent; } /* Barras superiores (créditos, origen, insights): conservan su fondo full-width tipo app-bar pero el contenido se alinea con la columna. */ .chat-sidebar--fullscreen .chat-credits-bar, .chat-sidebar--fullscreen .chat-source-scope, .chat-sidebar--fullscreen .chat-insights-bar { padding-left: var(--chatfs-gutter); padding-right: var(--chatfs-gutter); } /* ── Tipografía elevada para lectura larga ─────────────────────────── 0.95rem/1.5 → 16.5px/1.75 en burbujas; el markdown del bot gana aire adicional entre líneas. */ .chat-sidebar--fullscreen .chat-message { font-size: 16.5px; line-height: 1.75; padding: 14px 20px; border-radius: 16px; } .chat-sidebar--fullscreen .message-bot.markdown-body p, .chat-sidebar--fullscreen .message-bot.markdown-body li { line-height: 1.85; } /* ── Input prominente con glow violeta en focus ────────────────────── La altura/medidas suben para sesión inmersiva; el JS de auto-resize (3 líneas máx por line-height computado) sigue funcionando porque solo cambia min-height/padding, no el mecanismo. */ .chat-sidebar--fullscreen .chat-input-area { padding: 18px var(--chatfs-gutter) 28px; border-top-color: rgba(124, 77, 255, 0.14); } .chat-sidebar--fullscreen .chat-textarea { min-height: 52px; padding: 14px 18px; font-size: 1rem; line-height: 1.55; border-radius: 14px; border: 1px solid rgba(124, 77, 255, 0.25); background: rgba(124, 77, 255, 0.05); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .chat-sidebar--fullscreen .chat-textarea:focus, .chat-sidebar--fullscreen .chat-textarea:focus-visible { outline: none; border-color: rgba(124, 77, 255, 0.55); background: rgba(124, 77, 255, 0.07); box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.15), 0 0 28px rgba(124, 77, 255, 0.12); } .chat-sidebar--fullscreen .chat-send-btn { width: 48px; height: 48px; box-shadow: 0 4px 18px rgba(124, 77, 255, 0.35); } /* Suggestions de anónimos: en la columna ancha caben lado a lado. */ .chat-sidebar--fullscreen .chat-suggestions-grid { grid-template-columns: 1fr 1fr; }