:root { --ai-chat-primary: rgba(var(--color-primary-500), 1); --ai-chat-bg: rgba(var(--color-neutral-50), 1); --ai-chat-text: rgba(var(--color-neutral-900), 1); --ai-chat-border: rgba(var(--color-neutral-200), 1); --ai-chat-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --ai-chat-bot-bg: rgba(var(--color-neutral-100), 1); --ai-chat-btn-bg: rgba(var(--color-neutral-200), 0.5); --ai-chat-btn-text: rgba(var(--color-neutral-500), 1); --ai-chat-btn-hover: rgba(var(--color-neutral-200), 0.8); } .dark { --ai-chat-bg: rgba(var(--color-neutral-800), 1); --ai-chat-text: rgba(var(--color-neutral-100), 1); --ai-chat-border: rgba(var(--color-neutral-700), 1); --ai-chat-bot-bg: rgba(var(--color-neutral-700), 0.5); --ai-chat-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --ai-chat-btn-bg: rgba(var(--color-neutral-700), 0.5); --ai-chat-btn-text: rgba(var(--color-neutral-400), 1); --ai-chat-btn-hover: rgba(var(--color-neutral-700), 0.8); } #ai-chat-widget { position: fixed; bottom: 5.5rem; right: 2rem; z-index: 999; font-family: inherit; } #ai-chat-toggle { background: linear-gradient(135deg, #d600d6, #00d6d6, #d6006b); background-size: 200% 200%; color: white; border: none; border-radius: 9999px; width: auto; height: 3.5rem; padding: 0 1.5rem; gap: 0.5rem; font-weight: 600; cursor: pointer; box-shadow: 0 0 20px rgba(255, 0, 255, 0.3); transition: all 0.2s; display: flex; align-items: center; justify-content: center; animation: chatGradientShift 3s ease-in-out infinite; } @keyframes chatGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } #ai-chat-toggle:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 30px rgba(255, 0, 255, 0.6), 0 0 60px rgba(0, 255, 255, 0.4); animation-duration: 1.5s; } #ai-chat-window { position: absolute; bottom: 4rem; right: 0; width: 350px; height: 500px; background-color: var(--ai-chat-bg); border: 1px solid var(--ai-chat-border); border-radius: 0.75rem; box-shadow: var(--ai-chat-shadow); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.2s, transform 0.2s; } #ai-chat-window.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .ai-chat-header { padding: 1rem; background-color: var(--ai-chat-primary); color: white; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .ai-chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; color: var(--ai-chat-text); } .ai-message { padding: 0.5rem 0.75rem; border-radius: 0.5rem; max-width: 80%; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; align-self: flex-end; } .ai-message.bot { background-color: var(--ai-chat-bot-bg); color: var(--ai-chat-text); align-self: flex-start; } .ai-message.user { background-color: var(--ai-chat-primary); color: white; } .ai-chat-input-area { padding: 1rem; border-top: 1px solid var(--ai-chat-border); display: flex; gap: 0.5rem; } #ai-chat-input { flex: 1; padding: 0.5rem; border: 1px solid var(--ai-chat-border); border-radius: 0.375rem; background-color: var(--ai-chat-bg); color: var(--ai-chat-text); } #ai-chat-send { background-color: var(--ai-chat-primary); color: white; border: none; border-radius: 0.375rem; padding: 0.5rem 1rem; cursor: pointer; } #ai-chat-send:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 640px) { body.ai-chat-open { overflow: hidden; } #ai-chat-widget { bottom: 1rem; right: 1rem; } #ai-chat-window { position: fixed; bottom: 0; right: 0; left: 0; top: 0; width: 100%; height: 100dvh; border-radius: 0; transform: translateY(100%); border: none; } #ai-chat-window.open { transform: translateY(0); } .ai-chat-header { padding: 1rem 1.5rem; } .ai-chat-messages { padding: 1rem 1.5rem; overscroll-behavior: contain; } #ai-chat-input { font-size: 16px; } }