/* Widget chat DATABOT — flotante abajo a la derecha, independiente de Tailwind */ /* * El root va al final de que suele ser flex column (min-h-screen flex flex-col). * Si el contenedor solo tiene hijos position:fixed, en algunos móviles el stacking o * el área útil falla. Lo sacamos del flujo flex con una capa fixed a pantalla completa. */ #databot-chat-root { --db-chat-bg: #0f172a; --db-chat-panel: #ffffff; --db-chat-accent: #0891b2; --db-chat-accent-hover: #0e7490; --db-chat-user: #ecfeff; --db-chat-bot: #f1f5f9; --db-chat-border: rgba(15, 23, 42, 0.12); position: fixed; inset: 0; width: auto; height: auto; overflow: visible; pointer-events: none; z-index: 99999; font-family: "Inter", system-ui, sans-serif; font-size: 1rem; line-height: 1.5; } #databot-chat-root *, #databot-chat-root *::before, #databot-chat-root *::after { box-sizing: border-box; } /* Modo prueba: botón visible aunque el token no permita arranque automático */ .db-chat-debug-launcher { position: fixed; left: calc(1rem + env(safe-area-inset-left, 0px)); right: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 100000; padding: 0.5rem 0.75rem; border-radius: 9999px; border: 2px dashed #d97706; background: #fffbeb; color: #92400e; font-size: 0.8125rem; font-weight: 700; font-family: "Inter", system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(146, 64, 14, 0.2); } .db-chat-debug-launcher:hover { background: #fef3c7; } .db-chat-debug-launcher:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; } /* Clics pasan a la página excepto en controles del chat */ .db-chat-toggle, .db-chat-panel, .db-chat-debug-launcher { pointer-events: auto; } .db-chat-toggle { position: fixed; right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: 3.5rem; height: 3.5rem; border-radius: 9999px; border: none; cursor: pointer; background: linear-gradient(145deg, var(--db-chat-accent), #155e75); color: #fff; box-shadow: 0 10px 25px rgba(8, 145, 178, 0.45); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .db-chat-toggle:hover { transform: scale(1.05); box-shadow: 0 12px 28px rgba(8, 145, 178, 0.55); } .db-chat-toggle:focus-visible { outline: 3px solid #22d3ee; outline-offset: 3px; } .db-chat-toggle svg { width: 1.75rem; height: 1.75rem; } .db-chat-panel { position: fixed; right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); width: min(100vw - 2rem, 22rem); max-height: min(70vh, 28rem); background: var(--db-chat-panel); border-radius: 0.75rem; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); border: 1px solid var(--db-chat-border); display: none; flex-direction: column; overflow: hidden; } .db-chat-panel[data-open="true"] { display: flex; } .db-chat-header { background: var(--db-chat-bg); color: #f8fafc; padding: 0.875rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .db-chat-header h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; } .db-chat-header p { margin: 0.125rem 0 0; font-size: 0.875rem; color: rgba(248, 250, 252, 0.75); } .db-chat-close { background: transparent; border: none; color: #e2e8f0; cursor: pointer; padding: 0.25rem; border-radius: 0.375rem; line-height: 0; } .db-chat-close:hover { background: rgba(255, 255, 255, 0.1); } .db-chat-messages { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.625rem; min-height: 10rem; max-height: calc(min(70vh, 28rem) - 9rem); background: #fafafa; } .db-chat-bubble { max-width: 92%; padding: 0.625rem 0.75rem; border-radius: 0.625rem; font-size: 0.9375rem; white-space: pre-wrap; word-break: break-word; } .db-chat-bubble--bot { align-self: flex-start; background: var(--db-chat-bot); color: #1e293b; border: 1px solid var(--db-chat-border); } .db-chat-bubble--user { align-self: flex-end; background: var(--db-chat-user); color: #0f172a; border: 1px solid rgba(8, 145, 178, 0.25); } /* Diagnóstico de conexión / configuración */ .db-chat-bubble--status { align-self: stretch; max-width: 100%; background: #fffbeb; border: 1px solid #f59e0b; color: #78350f; font-size: 0.875rem; } .db-chat-foot { padding: 0.625rem; border-top: 1px solid var(--db-chat-border); background: #fff; display: flex; gap: 0.5rem; align-items: flex-end; } .db-chat-input { flex: 1; min-height: 2.75rem; max-height: 6rem; resize: none; border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.5rem 0.625rem; font: inherit; font-size: 0.9375rem; } .db-chat-input:focus { outline: none; border-color: var(--db-chat-accent); box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2); } .db-chat-send { flex-shrink: 0; min-height: 2.75rem; min-width: 2.75rem; border: none; border-radius: 0.5rem; background: var(--db-chat-accent); color: #fff; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .db-chat-send:hover:not(:disabled) { background: var(--db-chat-accent-hover); } .db-chat-send:disabled { opacity: 0.55; cursor: not-allowed; } .db-chat-err { font-size: 0.8125rem; color: #b91c1c; padding: 0 0.75rem 0.5rem; background: #fef2f2; } .db-chat-typing { font-size: 0.8125rem; color: #64748b; padding: 0 0.75rem; min-height: 1.25rem; } @media (max-width: 480px) { .db-chat-panel { right: max(0.5rem, env(safe-area-inset-right, 0px)); left: max(0.5rem, env(safe-area-inset-left, 0px)); width: auto; bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); max-height: min(75vh, 32rem); } .db-chat-toggle { right: calc(0.75rem + env(safe-area-inset-right, 0px)); bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); } .db-chat-debug-launcher { left: calc(0.75rem + env(safe-area-inset-left, 0px)); bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .db-chat-toggle { transition: none; } }