diff --git a/app.js b/app.js index 450e04d..17ad062 100644 --- a/app.js +++ b/app.js @@ -1,417 +1,133 @@ -// let name = "adi"; -// let age = 19; - -// let num1 = 25; -// let num2 = 25; -// let sum = num1 + num2; - -// Wishlistz Chatbot JavaScript - // Get DOM elements const messageInput = document.getElementById('messageInput'); const sendButton = document.getElementById('sendButton'); const chatMessages = document.getElementById('chatMessages'); const attachButton = document.getElementById('attachButton'); const fileInput = document.getElementById('fileInput'); +const toggleSwitch = document.getElementById('themeCheckbox'); +const minimizeButton = document.getElementById('minimizeButton'); // Matches your HTML ID +const chatContainer = document.querySelector('.chat-container'); + +// --- DATA ARRAYS --- +const botResponses = ["Welcome to Wishlistz ๐Ÿ›๏ธ", "Men, Women or Kids?", "Browse latest fashion ๐Ÿ”ฅ", "Great choice!", "Added to wishlist โค๏ธ", "Item available in all sizes", "Check todayโ€™s offers ๐Ÿ’ธ", "Popular item right now โญ", "View your wishlist anytime", "New arrivals are live โœจ", "Need size help?", "More styles available ๐Ÿ‘—๐Ÿ‘”", "Item saved successfully โœ”๏ธ", "Shop smart with Wishlistz ๐Ÿ›’", "What would you like to add?"]; +const fileResponses = ["๐Ÿ“ŽLooks like a shirt ๐Ÿ‘• Added to your wishlist", "โœ…Beautiful! dress saved successfully.", "โœจ Menโ€™s product added ๐Ÿ‘”.", "๐ŸŽจ Product image saved to wishlist โค๏ธ!"]; +const imageResponses = ["โœ…Looks like a shirt ๐Ÿ‘• Added to your wishlist", "๐Ÿ“ธ Beautiful! dress saved successfully.", "โœจ Menโ€™s product added ๐Ÿ‘”.", "๐ŸŽจ Product image saved to wishlist โค๏ธ!"]; + +// --- MINIMIZE & EXPAND LOGIC --- +minimizeButton.addEventListener('click', (e) => { + e.stopPropagation(); // Prevents immediate re-opening + chatContainer.classList.add('minimized'); +}); -// Array of bot responses -const botResponses = [ - "Welcome to Wishlistz ๐Ÿ›๏ธ", - "Men, Women or Kids?", - "Browse latest fashion ๐Ÿ”ฅ", - "Great choice!", - "Added to wishlist โค๏ธ", - "Item available in all sizes", - "Check todayโ€™s offers ๐Ÿ’ธ", - "Popular item right now โญ", - "View your wishlist anytime", - "New arrivals are live โœจ", - "Need size help?", - "More styles available ๐Ÿ‘—๐Ÿ‘”", - "Item saved successfully โœ”๏ธ", - "Shop smart with Wishlistz ๐Ÿ›’", - "What would you like to add?" -]; - -// Array of file-specific bot responses -const fileResponses = [ - "๐Ÿ“ŽLooks like a shirt ๐Ÿ‘• Added to your wishlist", - "โœ…Beautiful! dress saved successfully.", - "โœจ Menโ€™s product added ๐Ÿ‘”.", - "๐ŸŽจ Product image saved to wishlist โค๏ธ!" -]; - -// Array of image-specific bot responses -const imageResponses = [ - "โœ…Looks like a shirt ๐Ÿ‘• Added to your wishlist", - "๐Ÿ“ธ Beautiful! dress saved successfully.", - "โœจ Menโ€™s product added ๐Ÿ‘”.", - "๐ŸŽจ Product image saved to wishlist โค๏ธ!" -]; - -// Helper Function: Get Current Time -function getCurrentTime() { - const now = new Date(); - let hours = now.getHours(); - let minutes = now.getMinutes(); - const ampm = hours >= 12 ? 'PM' : 'AM'; - - // Convert to 12-hour format - hours = hours % 12; - hours = hours ? hours : 12; // Hour '0' should be '12' - - // Add leading zero to minutes if needed - minutes = minutes < 10 ? '0' + minutes : minutes; - - return `${hours}:${minutes} ${ampm}`; -} - -// Helper Function: Get File Extension -function getFileExtension(filename) { - return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase(); -} - -// Helper Function: Get File Icon -function getFileIcon(extension) { - const iconMap = { - 'pdf': '๐Ÿ“„', - 'doc': '๐Ÿ“', - 'docx': '๐Ÿ“', - 'txt': '๐Ÿ“ƒ', - 'jpg': '๐Ÿ–ผ๏ธ', - 'jpeg': '๐Ÿ–ผ๏ธ', - 'png': '๐Ÿ–ผ๏ธ' - }; - return iconMap[extension] || '๐Ÿ“Ž'; -} - -// Helper Function: Format File Size -function formatFileSize(bytes) { - if (bytes === 0) return '0 Bytes'; +chatContainer.addEventListener('click', () => { + if (chatContainer.classList.contains('minimized')) { + chatContainer.classList.remove('minimized'); + } +}); - const k = 1024; - const sizes = ['Bytes', 'KB', 'MB', 'GB']; - const i = Math.floor(Math.log(bytes) / Math.log(k)); +// --- THEME TOGGLE LOGIC --- +toggleSwitch.addEventListener('change', function(e) { + if (this.checked) { + document.body.classList.add('light-mode'); + localStorage.setItem('theme', 'light'); + } else { + document.body.classList.remove('light-mode'); + localStorage.setItem('theme', 'dark'); + } +}); - return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]; +// Load saved theme on refresh +if (localStorage.getItem('theme') === 'light') { + toggleSwitch.checked = true; + document.body.classList.add('light-mode'); } -// Helper Function: Check if File is Image -function isImageFile(filename) { - const extension = getFileExtension(filename); - return ['jpg', 'jpeg', 'png'].includes(extension); -} -// Helper Function: Scroll to Bottom -function scrollToBottom() { - chatMessages.scrollTop = chatMessages.scrollHeight; -} +function getFileExtension(fn) { return fn.slice((fn.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase(); } +function isImageFile(fn) { return ['jpg', 'jpeg', 'png'].includes(getFileExtension(fn)); } +function scrollToBottom() { chatMessages.scrollTop = chatMessages.scrollHeight; } -// Function: Add Message to Chat +// --- MESSAGE DISPLAY LOGIC --- function addMessage(text, isUser = false) { - // Create message container const messageDiv = document.createElement('div'); messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`; - - // Create message content - const messageContent = document.createElement('div'); - messageContent.className = 'message-content'; - - // Create message text - const messageText = document.createElement('p'); - messageText.textContent = text; - - // Create timestamp - const messageTime = document.createElement('span'); - messageTime.className = 'message-time'; - messageTime.textContent = getCurrentTime(); - - // Append elements - messageContent.appendChild(messageText); - messageContent.appendChild(messageTime); - messageDiv.appendChild(messageContent); + messageDiv.innerHTML = ` +
+

${text}

+
`; chatMessages.appendChild(messageDiv); - - // Scroll to bottom scrollToBottom(); } -// Function: Add File Message to Chat function addImageMessage(imageSrc, isUser = false) { - // Create message container const messageDiv = document.createElement('div'); messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`; - - // Create message content - const messageContent = document.createElement('div'); - messageContent.className = 'message-content has-image'; - - // Create image element - const img = document.createElement('img'); - img.src = imageSrc; - img.className = 'message-image'; - img.alt = 'Uploaded image'; - - // Create timestamp - const messageTime = document.createElement('span'); - messageTime.className = 'message-time'; - messageTime.textContent = getCurrentTime(); - - // Append elements - messageContent.appendChild(img); - messageContent.appendChild(messageTime); - messageDiv.appendChild(messageContent); + messageDiv.innerHTML = ` +
+ upload + ${getCurrentTime()} +
`; chatMessages.appendChild(messageDiv); - - // Scroll to bottom scrollToBottom(); } -// Function: Add File Message to Chat -function addFileMessage(fileName, fileSize, isUser = false) { - // Get file extension and icon - const extension = getFileExtension(fileName); - const icon = getFileIcon(extension); - - // Create message container - const messageDiv = document.createElement('div'); - messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`; - - // Create message content - const messageContent = document.createElement('div'); - messageContent.className = 'message-content'; - - // Create file card - const fileCard = document.createElement('div'); - fileCard.className = 'file-card'; - - // Create file icon - const fileIcon = document.createElement('div'); - fileIcon.className = 'file-icon'; - fileIcon.textContent = icon; - - // Create file info container - const fileInfo = document.createElement('div'); - fileInfo.className = 'file-info'; - - // Create file name - const fileNameDiv = document.createElement('div'); - fileNameDiv.className = 'file-name'; - fileNameDiv.textContent = fileName; - - // Create file size - const fileSizeDiv = document.createElement('div'); - fileSizeDiv.className = 'file-size'; - fileSizeDiv.textContent = formatFileSize(fileSize); - - // Append file info - fileInfo.appendChild(fileNameDiv); - fileInfo.appendChild(fileSizeDiv); - - // Append to file card - fileCard.appendChild(fileIcon); - fileCard.appendChild(fileInfo); - - // Create timestamp - const messageTime = document.createElement('span'); - messageTime.className = 'message-time'; - messageTime.textContent = getCurrentTime(); - - // Append to message content - messageContent.appendChild(fileCard); - messageContent.appendChild(messageTime); - messageDiv.appendChild(messageContent); - chatMessages.appendChild(messageDiv); - - // Scroll to bottom - scrollToBottom(); -} - -// Function: Show Typing Indicator function showTypingIndicator() { const typingDiv = document.createElement('div'); typingDiv.className = 'message bot-message'; typingDiv.id = 'typingIndicator'; - - const typingContent = document.createElement('div'); - typingContent.className = 'message-content'; - - const typingIndicator = document.createElement('div'); - typingIndicator.className = 'typing-indicator'; - - // Create three dots - for (let i = 0; i < 3; i++) { - const dot = document.createElement('div'); - dot.className = 'typing-dot'; - typingIndicator.appendChild(dot); - } - - typingContent.appendChild(typingIndicator); - typingDiv.appendChild(typingContent); + typingDiv.innerHTML = `
...
`; chatMessages.appendChild(typingDiv); - scrollToBottom(); } -// Function: Remove Typing Indicator -function removeTypingIndicator() { - const typingIndicator = document.getElementById('typingIndicator'); - if (typingIndicator) { - typingIndicator.remove(); - } -} - -// Function: Get Random Bot Response -function getRandomBotResponse() { - const randomIndex = Math.floor(Math.random() * botResponses.length); - return botResponses[randomIndex]; -} - -// Function: Get Random File Response -function getRandomFileResponse() { - const randomIndex = Math.floor(Math.random() * fileResponses.length); - return fileResponses[randomIndex]; -} - -// Function: Get Random Image Response -function getRandomImageResponse() { - const randomIndex = Math.floor(Math.random() * imageResponses.length); - return imageResponses[randomIndex]; -} - -// Function: Send Bot Response -function sendBotResponse(isFileUpload = false, isImageUpload = false) { - // Show typing indicator +function sendBotResponse(isFile = false, isImg = false) { showTypingIndicator(); - - // Simulate bot thinking time (1-2 seconds) - const thinkingTime = Math.random() * 1000 + 1000; - setTimeout(() => { - // Remove typing indicator - removeTypingIndicator(); - - // Add bot message based on context - let botMessage; - if (isImageUpload) { - botMessage = getRandomImageResponse(); - } else if (isFileUpload) { - botMessage = getRandomFileResponse(); - } else { - botMessage = getRandomBotResponse(); - } - - addMessage(botMessage, false); - }, thinkingTime); + const indicator = document.getElementById('typingIndicator'); + if (indicator) indicator.remove(); + + let response; + if (isImg) response = imageResponses[Math.floor(Math.random() * imageResponses.length)]; + else if (isFile) response = fileResponses[Math.floor(Math.random() * fileResponses.length)]; + else response = botResponses[Math.floor(Math.random() * botResponses.length)]; + + addMessage(response, false); + }, 1200); } -// Function: Handle File Upload -function handleFileUpload(event) { - const file = event.target.files[0]; +function handleSendMessage() { + const text = messageInput.value.trim(); + if (text === '') return; + addMessage(text, true); + messageInput.value = ''; + sendBotResponse(); +} - // Check if file exists - if (!file) { - return; - } +sendButton.addEventListener('click', handleSendMessage); +messageInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleSendMessage(); }); - // Check if file is an image +attachButton.addEventListener('click', () => fileInput.click()); +fileInput.addEventListener('change', (e) => { + const file = e.target.files[0]; + if (!file) return; if (isImageFile(file.name)) { - // Use FileReader to read image as Data URL const reader = new FileReader(); - - reader.onload = function(e) { - // Add image message to chat - addImageMessage(e.target.result, true); - - // Send bot response for image + reader.onload = (ev) => { + addImageMessage(ev.target.result, true); sendBotResponse(false, true); }; - - // Read file as Data URL (base64) reader.readAsDataURL(file); } else { - // Handle other file types (PDF, DOC, TXT) - addFileMessage(file.name, file.size, true); - - // Send bot response for file + addMessage(`๐Ÿ“Ž Sent: ${file.name}`, true); sendBotResponse(true, false); } - - // Reset file input so same file can be uploaded again - fileInput.value = ''; -} -// Function: Handle Send Message -function handleSendMessage() { - // Get message text and trim whitespace - const messageText = messageInput.value.trim(); - - // Check if message is not empty - if (messageText === '') { - return; - } - - // Add user message to chat - addMessage(messageText, true); - - // Clear input field - messageInput.value = ''; - - // Focus back on input - messageInput.focus(); - - // Send bot response after a short delay - sendBotResponse(); -} - -// Event Listeners - -// Attach button click event - triggers file input -attachButton.addEventListener('click', () => { - fileInput.click(); }); -// File input change event - handles file upload -fileInput.addEventListener('change', handleFileUpload); - -// Send button click event -sendButton.addEventListener('click', handleSendMessage); - -// Enter key press event -messageInput.addEventListener('keypress', (event) => { - if (event.key === 'Enter') { - handleSendMessage(); +document.addEventListener('click', (e) => { + if (e.target.classList.contains('qa-btn')) { + const text = e.target.innerText; + addMessage(text, true); // Use your existing addMessage function + sendBotResponse(); // Trigger your existing bot response + e.target.parentElement.style.display = 'none'; // Optional: hide after use } -}); - -// Input field focus on page load -window.addEventListener('load', () => { - messageInput.focus(); - - // Add a slight delay before scrolling to ensure DOM is ready - setTimeout(scrollToBottom, 100); -}); - -// Optional: Disable send button when input is empty -messageInput.addEventListener('input', () => { - if (messageInput.value.trim() === '') { - sendButton.style.opacity = '0.5'; - sendButton.style.cursor = 'not-allowed'; - } else { - sendButton.style.opacity = '1'; - sendButton.style.cursor = 'pointer'; - } -}); - -// Initialize button state -if (messageInput.value.trim() === '') { - sendButton.style.opacity = '0.5'; - sendButton.style.cursor = 'not-allowed'; -} - -// Theme Toggle Logic -const themeToggle = document.getElementById('themeToggle'); - -themeToggle.addEventListener('click', () => { - document.body.classList.toggle('light-mode'); - themeToggle.textContent = document.body.classList.contains('light-mode') ? '๐ŸŒž' : '๐ŸŒ“'; }); \ No newline at end of file diff --git a/image.png b/image.png new file mode 100644 index 0000000..4b84bb4 Binary files /dev/null and b/image.png differ diff --git a/index.html b/index.html index 6abba50..54ad101 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,12 @@ - -
- - +
-
W
+
+ Wishlistz Logo +

Wishlistz

@@ -22,50 +21,54 @@

Wishlistz
- - +
+
+ +
+ +
-

Welcome to Wishlistz ๐Ÿ‘‹

- Just now

How can I help you today?

- Just now +
+
+ + +
-
- - - + +
-
- \ No newline at end of file diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..f6bdbff Binary files /dev/null and b/logo.png differ diff --git a/style.css b/style.css index ea568eb..106446f 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -/* Reset and Base */ +/* Reset and Base Styles */ * { margin: 0; padding: 0; @@ -8,74 +8,67 @@ body { margin: 0; min-height: 100vh; - font-family: 'Segoe UI', sans-serif; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #0f172a; color: #f1f5f9; display: flex; justify-content: center; align-items: center; padding: 20px; - transition: background-color 0.3s ease, color 0.3s ease; + transition: background-color 0.3s ease; } -/* Chat Container */ +/* Chat Container - Main Window */ .chat-container { + position: fixed; + bottom: 20px; + right: 20px; width: 100%; - max-width: 600px; - height: 700px; + max-width: 420px; + height: 650px; background: #1e293b; border-radius: 16px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; - transition: background 0.3s ease; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); + z-index: 1000; } -/* Chat Header */ +/* Header Section */ .chat-header { background-color: #1e293b; - color: #f1f5f9; - padding: 20px; + padding: 16px 20px; border-bottom: 1px solid #334155; } .header-content { display: flex; align-items: center; - gap: 15px; + width: 100%; } .bot-avatar { - width: 48px; - height: 48px; + width: 44px; + height: 44px; border-radius: 50%; + overflow: hidden; + flex-shrink: 0; background: #334155; - color: #60a5fa; - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; - font-size: 30px; - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } -.header-info { - display: flex; - flex-direction: column; - gap: 4px; -} +.bot-avatar img { width: 100%; height: 100%; object-fit: cover; } -.bot-name { - font-size: 20px; - font-weight: 600; -} +.header-info { margin-left: 12px; display: flex; flex-direction: column; } + +.bot-name { font-size: 18px; } .status { display: flex; align-items: center; gap: 6px; - font-size: 14px; + font-size: 13px; color: #4ade80; } @@ -87,207 +80,211 @@ body { animation: pulse 2s infinite; } -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} +/* Header Buttons */ +.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } -/* Theme Toggle Button */ -.theme-toggle { - margin-left: auto; - padding: 6px 12px; +.header-button { + width: 34px; + height: 34px; background: #334155; border: none; - border-radius: 6px; - font-size: 16px; - cursor: pointer; + border-radius: 8px; color: #f1f5f9; - transition: background 0.3s ease; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: 0.2s ease; } -.theme-toggle:hover { - background: #475569; +/* Theme Toggle Slider */ +.theme-switch { display: inline-block; height: 24px; position: relative; width: 48px; } +.theme-switch input { display: none; } +.slider { + background-color: #334155; + bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; + transition: .4s; border-radius: 34px; + display: flex; align-items: center; justify-content: space-between; padding: 0 6px; +} +.slider:before { + background-color: #fff; bottom: 3px; content: ""; height: 18px; left: 3px; + position: absolute; transition: .4s; width: 18px; border-radius: 50%; z-index: 2; } +input:checked + .slider { background-color: #2563eb; } +input:checked + .slider:before { transform: translateX(24px); } -/* Chat Messages */ +/* Messages Area with Logo Watermark */ .chat-messages { flex: 1; overflow-y: auto; - padding: 16px; + padding: 20px; background-color: #0f172a; background-image: url("logo-dark.png"); background-repeat: no-repeat; background-position: center; - background-size: 420px; /* Increased size */ - background-attachment: fixed; - background-blend-mode: luminosity; - opacity: 1; + background-size: 200px; + background-blend-mode: overlay; display: flex; flex-direction: column; - gap: 12px; - transition: background-color 0.3s ease, background-image 0.3s ease; -} - -body.light-mode .chat-messages { - background-color: #f9fafb; - background-image: url("logo-light.png"); - background-repeat: no-repeat; - background-position: center; - background-size: 350px; /* Match dark mode size */ - background-attachment: fixed; - background-blend-mode: luminosity; -} - - -.chat-messages::-webkit-scrollbar { - width: 6px; -} -.chat-messages::-webkit-scrollbar-thumb { - background: #475569; - border-radius: 3px; -} - -/* Messages */ -.message { - display: flex; -} - -.bot-message { - justify-content: flex-start; -} - -.user-message { - justify-content: flex-end; + gap: 15px; } .message-content { - max-width: 75%; - padding: 10px 14px; - border-radius: 12px; + max-width: 80%; + padding: 12px 16px; + border-radius: 14px; font-size: 15px; - line-height: 1.5; background: #334155; color: #f1f5f9; - position: relative; -} - -.user-message .message-content { - background: #196bf0; - color: #ffffff; } -.message-time { - font-size: 11px; - color: #2b2626; /* darker slate for better contrast */ - margin-top: 4px; - text-align: right; -} +.user-message { align-self: flex-end; } +.user-message .message-content { background: #2563eb; color: #fff; } -/* Chat Input */ +/* Input Controls */ .chat-input-container { padding: 16px; - background-color: #1e293b; + background: #1e293b; border-top: 1px solid #334155; } -.input-wrapper { - display: flex; - gap: 10px; - align-items: center; -} +.input-wrapper { display: flex; gap: 10px; align-items: center; } .message-input { flex: 1; - padding: 12px 16px; + padding: 12px 18px; border: 1px solid #475569; - border-radius: 24px; - font-size: 15px; - outline: none; - background-color: #0f172a; + border-radius: 25px; + background: #0f172a; color: #f1f5f9; + outline: none; } -.message-input:focus { - border-color: #60a5fa; - box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3); +.attach-button, .send-button { + width: 42px; height: 42px; border-radius: 50%; border: none; + background: #334155; color: #60a5fa; cursor: pointer; + display: flex; align-items: center; justify-content: center; transition: 0.2s; } -.attach-button, -.send-button { - width: 44px; - height: 44px; - border: none; +/* --- MINIMIZED FLOATING BUBBLE --- */ +.chat-container.minimized { + width: 65px; + height: 65px; border-radius: 50%; - background-color: #334155; - color: #60a5fa; - display: flex; - align-items: center; - justify-content: center; cursor: pointer; - transition: background 0.2s ease; + box-shadow: 0 4px 20px rgba(0,0,0,0.3); + background-color: #ffffff; + border: 2px solid #2563eb; } -.attach-button:hover, -.send-button:hover { - background-color: #3b82f6; - color: #ffffff; +.chat-container.minimized .chat-header, +.chat-container.minimized .chat-messages, +.chat-container.minimized .chat-input-container { + display: none; } -/* Light Mode Overrides */ -body.light-mode { - background-color: #f4f4f6; - color: #1a1a1a; +.chat-container.minimized::after { + content: ""; + position: absolute; + top: 0; left: 0; width: 100%; height: 100%; + background: url("logo.png") no-repeat center; + background-size: 65%; + border-radius: 50%; } -body.light-mode .chat-container { - background: #ffffff; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); +/* --- LIGHT MODE OVERRIDES --- */ +body.light-mode { background-color: #f1f5f9; } + +body.light-mode .chat-container { + background: #ffffff; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); } -body.light-mode .chat-header, -body.light-mode .chat-input-container { - background-color: #ffffff; - color: #1a1a1a; - border-color: #e5e7eb; +body.light-mode .chat-header, +body.light-mode .chat-input-container { + background: #fff; + border-color: #e2e8f0; + color: #1e293b; } -body.light-mode .chat-messages { - background-color: #f9fafb; +/* Enhancing Background Logo Visibility in Light Mode */ +body.light-mode .chat-messages { + background-color: #f8fafc; + background-image: url("logo-light.png"); + background-size: 250px; + background-blend-mode: multiply; } -body.light-mode .message-input { - background-color: #f9fafb; - color: #1a1a1a; - border-color: #d1d5db; +body.light-mode .message-content { background: #f1f5f9; color: #1e293b; } + +/* BLUE User Messages in Light Mode */ +body.light-mode .user-message .message-content { + background: #2563eb; + color: #ffffff; } -body.light-mode .attach-button, -body.light-mode .send-button { - background-color: #e5e7eb; - color: #3b82f6; +body.light-mode .message-input { background: #fff; border-color: #cbd5e1; color: #1e293b; } + +body.light-mode .attach-button, +body.light-mode .send-button, +body.light-mode .header-button { + background-color: #f1f5f9; + color: #2563eb; + border: 1px solid #e2e8f0; } -body.light-mode .attach-button:hover, -body.light-mode .send-button:hover { - background-color: #dbeafe; +/* Visible Status Tag in Light Mode */ +body.light-mode .status { + color: #166534; + background: #dcfce7; + padding: 2px 10px; + border-radius: 20px; + font-weight: 600; } -body.light-mode .bot-message .message-content { - background: #e0e7ff; - color: #1e3a8a; +/* --- NEW: QUICK ACTIONS STYLING --- */ +.quick-actions { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 15px; +} + +.qa-btn { + background: #334155; + color: #f1f5f9; + border: 1px solid #475569; + padding: 8px 16px; + border-radius: 20px; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; } -body.light-mode .user-message .message-content { - background: #fee2e2; - color: #991b1b; +.qa-btn:hover { + background: #2563eb; + border-color: #3b82f6; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } -body.light-mode .theme-toggle { - background: #f3f4f6; - color: #1f2937; +/* Light Mode Quick Actions */ +body.light-mode .qa-btn { + background: #ffffff; + color: #1e293b; + border-color: #cbd5e1; } -body.light-mode .theme-toggle:hover { - background: #e5e7eb; +body.light-mode .qa-btn:hover { + background: #2563eb; + color: #ffffff; + border-color: #2563eb; } +@keyframes pulse { + 0% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.2); opacity: 0.7; } + 100% { transform: scale(1); opacity: 1; } +} \ No newline at end of file