/* ============================================================ * Rols One — Widget chatbot embebido (shared) * * Estilos del widget que cualquier app de la suite (calc, stock, * futuras) embebe en esquina inferior derecha. Auto-contenidos: * no dependen de variables CSS de la app que lo monta, sino que * declaran sus propios fallbacks. * * El JS asociado (chatbot.js) inyecta el markup en y se * encarga de abrir/cerrar el panel y de hablar con el asistente * (http://localhost:5052/api/chat). * ============================================================ */ /* Permitir override de la app que lo monta (calc, stock) — si no * estan definidas, fallback a tonos de la suite Rols. */ .rols-chatbot { --rcb-accent: var(--accent, #c8a771); --rcb-accent-hover: var(--accent-hover, #a98855); --rcb-accent-soft: var(--accent-soft, #f3e9d7); --rcb-border: var(--border, #e6dfd6); --rcb-bg: #fff; --rcb-bg-soft: #FAF8F6; --rcb-text: #4D4D4D; --rcb-text-strong: #2a2a2a; --rcb-header-grad-from: #4D4D4D; --rcb-header-grad-to: #3a3a3a; } /* ----- Boton FAB (estado colapsado) ----- */ .rols-chatbot-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; display: inline-flex; align-items: center; gap: 0.55rem; background: linear-gradient(135deg, var(--rcb-header-grad-from) 0%, var(--rcb-header-grad-to) 100%); color: #fff; border: none; padding: 0.75rem 1.1rem; border-radius: 999px; font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; box-shadow: 0 10px 28px -10px rgba(77,77,77,0.5), 0 2px 6px rgba(77,77,77,0.18); z-index: 90; transition: transform 0.15s, box-shadow 0.15s; } .rols-chatbot-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(77,77,77,0.55), 0 3px 8px rgba(77,77,77,0.22); } .rols-chatbot-fab-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--rcb-accent); } .rols-chatbot-fab-label { white-space: nowrap; } .rols-chatbot-fab.is-hidden { display: none; } /* Estado offline: el guard SSO no encuentra al asistente. */ html.sso-offline .rols-chatbot-fab { opacity: 0.55; filter: grayscale(35%); } /* ----- Panel desplegable ----- */ .rols-chatbot-panel { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 380px; max-width: calc(100vw - 3rem); height: 540px; max-height: calc(100vh - 3rem); background: var(--rcb-bg); border: 1px solid var(--rcb-border); border-radius: 18px; box-shadow: 0 24px 56px -16px rgba(77,77,77,0.35), 0 6px 16px rgba(77,77,77,0.12); display: flex; flex-direction: column; overflow: hidden; z-index: 91; animation: rcbIn 0.18s ease-out; } .rols-chatbot-panel.is-hidden { display: none; } @keyframes rcbIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ----- Header ----- */ .rols-chatbot-header { padding: 0.85rem 1rem; background: linear-gradient(135deg, var(--rcb-header-grad-from) 0%, var(--rcb-header-grad-to) 100%); color: #fff; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .rols-chatbot-header-info { display: flex; align-items: center; gap: 0.7rem; } .rols-chatbot-header-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,0.12); color: var(--rcb-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rols-chatbot-header-title { font-size: 0.92rem; font-weight: 600; line-height: 1.2; } .rols-chatbot-header-sub { font-size: 0.7rem; color: rgba(255,255,255,0.65); margin-top: 1px; } .rols-chatbot-close { background: transparent; border: none; color: rgba(255,255,255,0.7); width: 28px; height: 28px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .rols-chatbot-close:hover { background: rgba(255,255,255,0.12); color: #fff; } /* ----- Body ----- */ .rols-chatbot-body { flex-grow: 1; overflow-y: auto; padding: 1rem; background: var(--rcb-bg-soft); font-size: 0.85rem; color: var(--rcb-text); line-height: 1.5; } .rols-chatbot-welcome { background: var(--rcb-bg); border: 1px solid var(--rcb-border); border-left: 3px solid var(--rcb-accent); border-radius: 10px; padding: 0.75rem 0.9rem; margin-bottom: 0.8rem; } /* ----- Thread conversacional ----- */ .rols-chatbot-thread { display: flex; flex-direction: column; gap: 0.55rem; } .rols-chatbot-msg { display: flex; gap: 0.45rem; } .rols-chatbot-msg.user { justify-content: flex-end; } .rols-chatbot-msg.assistant { justify-content: flex-start; } .rols-chatbot-msg-bubble { background: var(--rcb-bg); border: 1px solid var(--rcb-border); border-radius: 14px; padding: 0.6rem 0.85rem; font-size: 0.85rem; line-height: 1.5; max-width: 90%; word-wrap: break-word; } .rols-chatbot-msg.user .rols-chatbot-msg-bubble { background: var(--rcb-accent); color: #fff; border-color: var(--rcb-accent); border-bottom-right-radius: 4px; } .rols-chatbot-msg.assistant .rols-chatbot-msg-bubble { border-bottom-left-radius: 4px; } .rols-chatbot-msg-bubble strong { color: var(--rcb-text); } .rols-chatbot-msg.user .rols-chatbot-msg-bubble strong { color: #fff; } .rols-chatbot-msg-bubble a { color: var(--rcb-accent-hover); text-decoration: underline; } /* Chips de acción rápida: el asistente puede devolver botones tras una * respuesta (colores disponibles si falta precisión, medidas alternativas, * etc.). Se pintan en una fila bajo la burbuja IA. */ .rols-chatbot-chips-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; margin-left: 0; padding: 0.1rem 0; } .rols-chatbot-chip { display: inline-flex; align-items: center; font-family: inherit; font-size: 0.72rem; font-weight: 500; background: var(--rcb-accent-soft); color: var(--rcb-accent-hover); border: 1px solid transparent; padding: 0.32rem 0.7rem; border-radius: 999px; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .rols-chatbot-chip:hover:not(:disabled) { background: var(--rcb-accent); color: #fff; border-color: var(--rcb-accent); } .rols-chatbot-chip:disabled { opacity: 0.5; cursor: default; } /* Chips de tipo "color" llevan un punto a la izquierda como indicador visual. */ .rols-chatbot-chip[data-chip-type="color"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--rcb-accent); margin-right: 0.4rem; } /* Boton "Ir a " — distintivo del chip normal: relleno con accent * para que parezca call-to-action. Se usa cuando el skill 'navegar' del * asistente devuelve payload.navigate. */ .rols-chatbot-chip.rols-chatbot-chip-nav { background: var(--rcb-accent); color: #fff; font-weight: 600; padding: 0.4rem 0.85rem; gap: 0.4rem; } .rols-chatbot-chip.rols-chatbot-chip-nav:hover:not(:disabled) { background: var(--rcb-accent-hover); color: #fff; } .rols-chatbot-chip-nav .rols-chatbot-nav-icon { display: inline-flex; align-items: center; } /* Burbuja "escribiendo..." mientras llega la respuesta */ .rols-chatbot-typing { display: inline-flex; gap: 0.2rem; padding: 0.2rem 0; } .rols-chatbot-typing span { width: 6px; height: 6px; border-radius: 999px; background: #b0a89e; animation: rcbTyping 1.2s infinite ease-in-out; } .rols-chatbot-typing span:nth-child(2) { animation-delay: 0.15s; } .rols-chatbot-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes rcbTyping { 0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* ----- Footer (input + send) ----- */ .rols-chatbot-footer { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.85rem 0.85rem; background: var(--rcb-bg); border-top: 1px solid var(--rcb-border); flex-shrink: 0; } .rols-chatbot-input-wrap { position: relative; flex-grow: 1; } .rols-chatbot-input { width: 100%; font-family: inherit; font-size: 0.85rem; padding: 0.55rem 0.9rem; border: 1px solid var(--rcb-border); border-radius: 10px; background: var(--rcb-bg-soft); color: var(--rcb-text-strong); outline: none; transition: border-color 0.12s, background 0.12s; } .rols-chatbot-input:focus { border-color: var(--rcb-accent); background: var(--rcb-bg); } .rols-chatbot-send { width: 36px; height: 36px; border-radius: 10px; background: var(--rcb-accent); color: #fff; border: none; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, transform 0.08s; } .rols-chatbot-send:hover { background: var(--rcb-accent-hover); } .rols-chatbot-send:active { transform: scale(0.96); } .rols-chatbot-send:disabled { opacity: 0.6; cursor: wait; } /* Responsive: panel a full width en moviles */ @media (max-width: 480px) { .rols-chatbot-panel { right: 0.75rem; bottom: 0.75rem; left: 0.75rem; width: auto; height: calc(100vh - 1.5rem); max-height: calc(100vh - 1.5rem); } .rols-chatbot-fab { right: 0.75rem; bottom: 0.75rem; padding: 0.7rem; } .rols-chatbot-fab-label { display: none; } }