@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

/* AI Assistant Chat Box Styles */
#ai-chat-box {font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"; font-size:14px; position: fixed; bottom: 20px; right: 20px; width: 400px; height: 80vh; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: none; flex-direction: column; z-index: 10000; border: 1px solid #e0e0e0; display: flex; font-size:13px; transition: all 0.3s ease; }
#ai-chat-header {background: #f7f7f7; color: #000; padding: 12px 16px; border-radius: 8px 8px 0 0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;}
#ai-chat-header h4 {margin: 0;font-size: 16px;font-weight: 600; color:#000;}
.header-buttons {display: flex;gap: 8px;}
#ai-chat-minimize, #ai-chat-close, #ai-chat-maximize {background: none; border: none; color: white; font-size: 13px; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;transition: background 0.2s;  color:#000;}
#ai-chat-minimize:hover, #ai-chat-close:hover, #ai-chat-maximize:hover {background: rgba(255, 255, 255, 0.1);border-radius: 4px;}

/* Conversation Management Button Styles */
#ai-end-conversation, #ai-new-conversation {background: none; border: none; color: white; font-size: 14px; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; border-radius: 4px; color:#000;}
#ai-end-conversation:hover, #ai-new-conversation:hover {background: rgba(255, 255, 255, 0.1);}
#ai-end-conversation i, #ai-new-conversation i {font-size: 12px;}

/* Maximize button specific styles */
/* Icons are handled directly in HTML, no need for ::before pseudo-elements */

#ai-chat-content {flex: 1;display: flex;flex-direction: column;overflow: hidden;}
#ai-chat-messages {flex: 1;padding: 0px;overflow-y: auto;background: #f7f7f7;}
#ai-chat-messages::-webkit-scrollbar {width: 6px;}
#ai-chat-messages::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 3px;}
#ai-chat-messages::-webkit-scrollbar-thumb {background: #c1c1c1;border-radius: 3px;}
#ai-chat-messages::-webkit-scrollbar-thumb:hover {background: #a8a8a8;}
#ai-chat-box.minimized {height: auto !important;width: 200px !important;}
#ai-chat-box.minimized #ai-chat-content {display: none !important;}
#ai-chat-box.minimized #ai-chat-header {border-radius: 8px !important;cursor: pointer;}
#ai-chat-box.minimized #ai-chat-header:hover {background: #333;}

/* Maximized state styles */
#ai-chat-box.maximized {position: fixed !important; top: 10% !important; left: 10% !important; bottom: 10% !important; right: 10% !important; width: 80vw !important; height: 80vh !important; border-radius: 12px !important; box-shadow: 0 8px 40px rgba(0,0,0,0.25) !important; z-index: 10001 !important;}
#ai-chat-box.maximized #ai-chat-header {border-radius: 12px 12px 0 0 !important;}
#ai-chat-box.maximized #ai-chat-messages {font-size: 14px !important;}
/*#ai-chat-box.maximized .ai-message {font-size: 14px !important;max-width: 100% !important;}*/
.ai-message {margin: 12px; border-radius: 10px;max-width: 77%;word-wrap: break-word; padding: 12px;}
.ai-message.user {background: #141414;color: #fff;margin-left: auto; margin-right: 45px; position:relative;}
.ai-message.user:before{content: ''; position: absolute; right: -34px; top: 2px; width: 28px; height: 28px; background: #141414 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23ffffff" d="M320 312C386.3 312 440 258.3 440 192C440 125.7 386.3 72 320 72C253.7 72 200 125.7 200 192C200 258.3 253.7 312 320 312zM290.3 368C191.8 368 112 447.8 112 546.3C112 562.7 125.3 576 141.7 576L498.3 576C514.7 576 528 562.7 528 546.3C528 447.8 448.2 368 349.7 368L290.3 368z"/></svg>') no-repeat center center; border-radius: 100px; background-size: contain; border: solid 5px #141414;}
.ai-message.assistant {background: #fff;color: #000;border: 1px solid #e0e0e0;border-bottom-left-radius: 0px; margin-left: 45px; position:relative;}

/* Message timestamp styles */
.message-timestamp {font-size: 10px; color: #7a7a7a; margin-top: 4px; text-align: right; font-style: italic; opacity: 0.8;}
.ai-message.user .message-timestamp {text-align: right; color:#fff;}
.ai-message.assistant .message-timestamp {text-align: left;}

/* Date separator styles */
.date-separator {display: flex; align-items: center; margin: 16px 0 12px 0; text-align: center;}
.date-separator-line {flex: 1; height: 1px; background-color: #e1e5e9;}
.date-separator-text {padding: 0 12px; font-size: 12px; font-weight: 500; color: #65676b; background-color: #f7f7f7; white-space: nowrap;}

.ai-message.assistant::before {content: ""; display: inline-block; left: -34px; top: 2px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #6a5acd, #6f42c1); box-shadow: 0 2px 6px rgba(0,0,0,0.2); position: absolute; display:none;}
.ai-message.assistant::after {content: ""; background: url(/assets/images/ai-icon.svg) center center no-repeat; position: absolute; top: 3px; left: -34px; width: 30px; height: 30px; background-size: cover;}


/*.ai-message.assistant:before{content: ''; position: absolute; left: -34px; top: 2px; width: 28px; height: 28px; background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/></svg>') no-repeat center center; border-radius: 100px; background-size: contain; border: solid 5px #000;}*/
.ai-message.assistant h3{font-size: 16px; font-weight:600;}
.ai-message.assistant h4{font-size: 16px; font-weight: 600; color: #000;}

#ai-chat-input {display: flex; align-items: center; border-top: 1px solid #e0e0e0; padding: 12px 12px 0px 12px; background: white; border-radius: 0 0 8px 8px; flex-shrink: 0; margin-top: auto; gap: 1px;}
#ai-chat-input .input-container {position: relative;flex: 1;display: flex;align-items: flex-start;}
#ai-chat-input textarea {width: 100%;border: 1px solid #ddd;border-radius: 20px;padding: 8px 16px;padding-right: 50px;font-size: 14px;box-sizing: border-box;resize: none;overflow-y: hidden;min-height: 36px;line-height: 1.4;font-family: inherit;}
#ai-chat-input textarea:focus {outline: none;border-color: #000000;}
#ai-chat-input #ai-send-btn {position: absolute;right: 4px;bottom: 2px;background: #000000;color: white;border: none;border-radius: 50%;width: 32px;height: 32px;cursor: pointer;font-size: 12px;transition: background 0.2s;display: flex;align-items: center;justify-content: center;padding: 0;}
#ai-chat-input #ai-send-btn:hover {background: #4A4A4A;}
#ai-chat-input #ai-send-btn:disabled {background: #ccc;cursor: not-allowed;opacity: 0.6;}

/* Microphone Button Styles */
.input-buttons {display: flex; gap: 5px; align-items: center;}
.mic-button {background: #000000; border: 1px solid #000000; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: white;}
.mic-button:hover {background: #4A4A4A; border-color: #4A4A4A; color: white;}
.mic-button.listening {background: #28a745;border-color: #28a745;color: white; animation: micPulse 1.5s infinite;}
.mic-button.listening:hover {background: #218838; border-color: #218838;}

@keyframes micPulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

.mic-button:disabled {opacity: 0.6; cursor: not-allowed;}
.mic-button.permission-denied {background: #dc3545; border-color: #dc3545; color: white; animation: permissionWarning 2s infinite;}
.mic-button.permission-denied:hover {background: #c82333;  border-color: #c82333;  color: white;}

@keyframes permissionWarning {
	0%, 100% {transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);}
	50% {transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);}
}

#ai-send-btn {border-radius: 50%;width: 36px;height: 36px;}
#ai-clear-chat {background: #000000 !important;color: white !important;border-radius: 50% !important;width: 32px !important;height: 32px !important;font-size: 12px !important;margin-left: 4px !important;display: flex !important;align-items: center !important;justify-content: center !important;padding: 0 !important;}
#ai-clear-chat:hover {background: #4A4A4A !important;}
#ai-chat-input button:hover {background: #4A4A4A;}
#ai-chat-input button:disabled {background: #ccc;cursor: not-allowed;}

/* AI Disclaimer Styles */
#ai-chat-disclaimer {padding: 0px 16px 8px 16px; text-align: center; border-top: 0px solid #f0f0f0; background-color: #fff; border-radius: 0 0 8px 8px;}
#ai-chat-disclaimer small {color: #888;font-size: 11px;line-height: 1.3;font-style: italic;}

/* Floating AI Assistant Icon Styles */
#ai-floating-icon {position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; box-shadow: 0 4px 20px rgba(0,0,0,0.3); cursor: pointer; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; border: 3px solid white;}
#ai-floating-icon:hover {transform: scale(1.1); box-shadow: 0 6px 25px rgba(0,0,0,0.4);}
#ai-floating-icon.hover {transform: scale(1.05);}
.floating-icon-content {position: relative;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;}
.ai-icon {width: 32px;height: 32px;color: white;filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));}
.floating-tooltip {position: absolute;bottom: 70px;right: 0;background: #333;color: white;padding: 8px 12px;border-radius: 6px;font-size: 12px;white-space: nowrap;opacity: 0;visibility: hidden;transition: all 0.3s ease;pointer-events: none;box-shadow: 0 2px 10px rgba(0,0,0,0.2);}
.floating-tooltip::after {content: '';position: absolute;top: 100%;right: 20px;border: 5px solid transparent;border-top-color: #333;}
#ai-floating-icon:hover .floating-tooltip {opacity: 1;visibility: visible;transform: translateY(-5px);}

/* Pulse animation for new messages */
#ai-floating-icon.has-notifications {animation: pulse 2s infinite;}

@keyframes pulse {
	0% {box-shadow: 0 4px 20px rgba(0,0,0,0.3);}
	50% {box-shadow: 0 4px 20px rgba(102, 126, 234, 0.6);}
	100% {box-shadow: 0 4px 20px rgba(0,0,0,0.3);}
}

/* Responsive adjustments */
@media (max-width: 768px) {
#ai-chat-box {width: 300px;height: 80vh;bottom: 10px;right: 10px;}
#ai-chat-box.maximized {width: 90vw !important;height: 85vh !important;top: 7.5% !important;left: 5% !important;right: 5% !important;bottom: 7.5% !important;}
#ai-floating-icon {width: 50px;height: 50px;bottom: 15px;right: 15px;}
.ai-icon {width: 28px;height: 28px;}
}

/* Custom Modal Styles */
.ai-modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 10001;backdrop-filter: blur(2px);}
.ai-modal {background: white;border-radius: 8px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);max-width: 400px;width: 90%;max-height: 90vh;overflow: hidden;animation: modalSlideIn 0.3s ease-out;}

@keyframes modalSlideIn {
	from {opacity: 0; transform: translateY(-20px) scale(0.95);}
	to {opacity: 1; transform: translateY(0) scale(1);}
}
.ai-modal-header {background: #000000;color: white;padding: 16px 20px;border-bottom: 1px solid #e0e0e0;}
.ai-modal-header h4 {margin: 0;font-size: 18px;font-weight: 600;}
.ai-modal-body {padding: 20px;border-bottom: 1px solid #e0e0e0;}
.ai-modal-body p {margin: 0;font-size: 14px;line-height: 1.5;color: #333;}
.ai-modal-footer {padding: 16px 20px;display: flex;gap: 12px;justify-content: flex-end;}
.ai-modal-btn {padding: 10px 20px;border: none;border-radius: 40px;font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.2s ease;}
.ai-modal-btn-cancel {background: #f8f9fa;color: #333;border: 1px solid #dee2e6;}
.ai-modal-btn-cancel:hover {background: #e9ecef;border-color: #adb5bd;}
.ai-modal-btn-confirm {background: #000;color: white;}
.ai-m

.product-link{border: solid 1px #888c8c; border-radius: 30px; font-size: 13px; color: #000; text-decoration: none; padding: 0px 12px; line-height: 30px; display: inline-block;}
.product-link:hover{border-color: #1c89e3; background: #edf8ff;}
/* Product Link Styling 
.product-link {color: #007bff !important;text-decoration: none !important;cursor: pointer !important;font-weight: 500 !important;transition: all 0.3s ease !important;display: inline-block !important;margin: 2px 0 !important;padding: 6px 12px !important;background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;border: 1px solid #dee2e6 !important;border-radius: 6px !important;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;position: relative !important;overflow: hidden !important;}
.product-link:hover {color: #ffffff !important;background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;border-color: #007bff !important;box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;transform: translateY(-1px) !important;text-decoration: none !important;}
.product-link:active {color: #ffffff !important;background: linear-gradient(135deg, #0056b3 0%, #004085 100%) !important;transform: translateY(0) !important;box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4) !important;}
.product-link::before {content: '🔗' !important;margin-right: 6px !important;font-size: 12px !important;opacity: 0.7 !important;transition: opacity 0.3s ease !important;}
.product-link:hover::before {opacity: 1 !important;}*/

/* AI Message Styling for Product Responses */
.ai-message.assistant.example-welcome {line-height: 1.6 !important; max-width: 100%; width:100%; border-radius: 0px; border:0px; display: table; background:#f7f7f7; margin:0px;}
.ai-message.assistant.example-welcome:before,.ai-message.assistant.example-welcome:after{display:none;}
.ai-message.assistant strong {color: #333 !important; font-weight: 600 !important;}
.ai-message.assistant br {margin-bottom: 4px !important;}
.ai-message.assistant.example-welcome .hand{font-size: 32px; animation: wave 2s infinite; transform-origin: 70% 70%; text-align:center; width: 60px; float: left;}
.ai-message.assistant.example-welcome .welcome-message{padding: 11px 5px; width: calc(100% - 60px); float: left;}

@keyframes wave {
	0% { transform: rotate(0deg); }
	10% { transform: rotate(14deg); }
	20% { transform: rotate(-8deg); }
	30% { transform: rotate(14deg); }
	40% { transform: rotate(-4deg); }
	50% { transform: rotate(10deg); }
	60% { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}

/* Selected Order Indicator Styles */
.selected-order-indicator {background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 2px solid #2196f3; border-radius: 8px; margin: 8px 16px; padding: 12px 16px; box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2); animation: slideInDown 0.3s ease-out;}

@keyframes slideInDown {
	from {opacity: 0; transform: translateY(-10px);}
	to {opacity: 1; transform: translateY(0);}
}

.indicator-content {display: flex;align-items: center;gap: 12px;}
.indicator-icon {font-size: 18px;color: #1976d2;}
.indicator-text {flex: 1;font-size: 14px;font-weight: 500;color: #1976d2;}
.indicator-clear {background: #f44336;color: white;border: none;border-radius: 50%;width: 24px;height: 24px;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 12px;transition: all 0.2s ease;}
.indicator-clear:hover {background: #d32f2f;transform: scale(1.1);}

/* Order Selection Link Styles */
.order-selection-link {color: #007bff;text-decoration: underline;cursor: pointer;display: block;margin: 5px 0;padding: 8px;border: 1px solid #007bff;border-radius: 4px;background-color: #f8f9fa;transition: all 0.2s ease;}
.order-selection-link:hover {background-color: #e3f2fd;border-color: #0056b3;color: #0056b3;transform: translateY(-1px);box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);}

/* Typing Indicator Styles */
.typing-indicator {background: white !important; border: 1px solid #e0e0e0 !important; border-bottom-left-radius: 0px !important; display:block!important}
.typing-dots {display: flex; align-items: center; gap: 2px; padding: 4px 0;}
.typing-dots span {width: 3px; height: 3px!important; background: #666; border-radius: 10px; animation: typingDot 1.4s infinite ease-in-out; line-height:normal!important; margin:0px!important}
.typing-dots span:nth-child(1) {animation-delay: -0.32s;}
.typing-dots span:nth-child(2) {animation-delay: -0.16s;}
.typing-dots span:nth-child(3) {animation-delay: 0s;}

@keyframes typingDot {
	0%, 80%, 100% {transform: scale(0.8); opacity: 0.5;}
	40% {transform: scale(1); opacity: 1;}
}

/* Enhanced product listing styling */
.ai-message.assistant div {margin-bottom: 8px; }
.ai-message.assistant div:last-child {margin-bottom: 0 !important;}
.ai-summary{border-bottom: 1px solid #e0e0e0; padding-bottom:8px;}
#ai-assistant-receipt-content{overflow:auto;}


/* Product name styling */
.ai-message.assistant strong {color: #2c3e50 !important;font-weight: 700 !important;font-size: 13px !important;display: block !important;margin-bottom: 2px !important;}

/* Product details styling */
.ai-message.assistant span {color: #000 !important;font-size: 13px !important;line-height: 1.4 !important; margin-left: 0px!important;}
.ai-message.assistant span.product-price{font-weight: 600;}
/* Responsive modal adjustments */

@media (max-width: 480px) {
	.ai-modal {width: 95%;margin: 20px;}
	.ai-modal-footer {flex-direction: column;}
	.ai-modal-btn {width: 100%;}
	#ai-chat-box {width: calc(100vw - 20px);height: 80vh;bottom: 10px;right: 10px;left: 10px;}
	#ai-chat-box.maximized {width: 95vw !important;height: 90vh !important;top: 5% !important;left: 2.5% !important;right: 2.5% !important;bottom: 5% !important;}
}

/* Example Questions Styling */
.example-welcome {text-align: left;margin-bottom:0px;}
.welcome-message h4 {color:#000;;font-size: 18px;margin-bottom: 2px;font-weight: 500;}
.welcome-message p {color:#000;font-size: 13px;margin: 0;line-height: 1.4;}
.example-questions-container {display: flex;flex-direction: column;gap: 12px;padding:15px;}
.example-question {display: flex; align-items: center; gap: 10px; padding: 15px; background: #fff; border: 0px solid #dee2e6; border-radius: 15px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; row-gap: 10px; justify-content: space-between;}
.example-question:hover .question-text, .example-question:hover .question-category {color: #000;}
.question-icon {font-size: 25px; width: 50px; text-align: center; background: rgba(108, 117, 125, 0.1); border-radius: 100px; padding: 10px; height: 50px; align-items: center; display: flex; text-align: center; justify-content: center;}
.question-icon img{width: 100%; height: auto;}
.question-content{width:223px;}
.question-text {flex: 1; color: #2c3e50; font-size: 15px; transition: color 0.3s ease;}
.question-category {font-size: 12px; color: #6c757d; white-space: nowrap; transition: all 0.3s ease; text-align: center; display: table; line-height: 20px;}
.question-arrow {width: 40px; text-align: center;}

/* AI Response Container Styles - Scoped to AI Chat Box */
#ai-chat-box .ai-response-container {border-radius: 8px; margin-bottom: 20px;}
#ai-chat-box .ai-response-title {margin-top: 0; color: #2c5aa0;}
#ai-chat-box .ai-response-subtitle {margin-top: 0; color: #155724;}
#ai-chat-box .ai-response-section {border-radius: 0px; margin-bottom: 15px !important; border-bottom: solid 1px #a1a1aa; padding-bottom: 15px;}
#ai-chat-box .ai-response-tips {background-color: #fff3cd; padding: 15px; border-radius: 8px;}
#ai-chat-box .ai-response-tips-title {margin-top: 0; color: #856404;}
#ai-chat-box .ai-response-tips-list {margin: 10px 0; padding-left: 20px;}
#ai-chat-box .ai-response-tips-list li {margin-bottom: 8px;}

/* Product Display Styles - Scoped to AI Chat Box */
#ai-chat-box .product-container {margin-bottom: 15px; padding: 0px; border-bottom: 1px solid #e0e0e0; background-color: white; padding: 10px 0px; margin:10px 0px;}
#ai-chat-box .product-container-large {margin-bottom: 20px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f9f9f9;}
#ai-chat-box .product-name {color: #000; text-decoration: none; font-weight: 600;}
#ai-chat-box .product-name:hover {color: #0056b3; text-decoration: underline;}
#ai-chat-box .product-image {width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 0px solid #e0e0e0; margin: 8px 0; display: block;}
#ai-chat-box .product-price {font-size: 18px; color: #2c5aa0;}
#ai-chat-box .product-description {font-size: 14px; line-height: 1.4; display: block; margin: 8px 0;}
#ai-chat-box .product-reason {font-weight: 600; color: #333;}

/* Summary and Info Boxes - Scoped to AI Chat Box */
#ai-chat-box .ai-summary-box {background-color: #e8f4fd; padding: 10px; border-radius: 5px; margin: 15px 0;}
#ai-chat-box .ai-info-box {background-color: #f0f8ff; padding: 10px; border-radius: 5px; margin: 15px 0;}

/* Search Results Styles - Scoped to AI Chat Box */
#ai-chat-box .search-results-container {background-color: #f9f9f9; padding: 15px; border-radius: 8px; margin-bottom: 20px;}
#ai-chat-box .search-results-title {margin-top: 0; color: #2c5aa0;}

/* Order Selection Link Styles - Scoped to AI Chat Box */
#ai-chat-box .order-selection-link {color: #000; cursor: pointer; display: inline-block; padding: 8px; border: 0px solid #007bff; padding: 0px; background: transparent; margin: 0px 5px; text-decoration: none; box-shadow:unset;}
#ai-chat-box .order-selection-link:hover {text-decoration:underline;}

#ai-assistant-receipt-content #promo_offer, #ai-assistant-receipt-content #email_receipt_message, #ai-assistant-receipt-content #order_online_link, #ai-assistant-receipt-content #receipt_footer, #ai-assistant-receipt-content #store_logo, #ai-assistant-receipt-content #feedback_option {display: none;}

/* Order Details Question Button Styles */
.order-details-container {position: relative;}

.order-question-section {margin-top: 15px; padding: 15px; background: #f7f7f7; border: 1px solid #dee2e6; border-radius: 10px; text-align: center;}
.order-question-prompt h4 {margin: 0 0 8px 0; color: #495057; font-size: 18px; font-weight: 600;}
.order-question-prompt p {margin: 0 0 16px 0; color: #6c757d; font-size: 14px; line-height: 1.4;}
.order-question-btn {background: #000; color: white; border: none; padding: 8px 20px; border-radius: 40px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;}
.order-question-btn i {font-size: 13px;}

/* Order Selection Message Styles */
.order-selection-message {background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px; margin: 8px 0;}
.order-selection-message p {margin: 0 0 12px 0; color: #495057; line-height: 1.5;}
.order-selection-message p:last-of-type {margin-bottom: 16px;}
.order-selection-actions {text-align: center;}
.clear-order-selection-btn {background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px;}
.clear-order-selection-btn:hover {background: #5a6268; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.clear-order-selection-btn:active {transform: translateY(0);}
.clear-order-selection-btn i {font-size: 12px;}

/* Product Popup Styles */
.ai-product-popup {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none; opacity: 0; transition: opacity 0.3s ease;}
.ai-product-popup.show {display: flex; opacity: 1;}
.ai-product-popup-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(1px); border-radius: 12px;}
.ai-product-popup-content {position: absolute; bottom: 0; left: 0; right: 0; background: white; border-radius: 12px 12px 12px 12px; padding:50px 20px 20px 20px; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s ease; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); display: grid; gap: 10px; align-items: start; grid-template-columns: 30% 67%;}
.ai-product-popup.show .ai-product-popup-content {transform: translateY(0);}
.ai-product-popup-close {position: absolute; top: 5px; right: 5px; background: #f8f9fa; border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s eas; z-index: 1;}
.ai-product-popup-close:hover {background: #e9ecef; transform: scale(1.1);}
.ai-product-popup-close i {font-size: 14px;color: #6c757d;}
.ai-product-popup-image {width: 100%;height: auto;border-radius: 12px;overflow: hidden;background: #f8f9fa;display: flex;align-items: baseline; justify-content: center;}
.ai-product-popup-image img {width: 100%;height: auto;object-fit: cover;transition: transform 0.3s ease;}
.ai-product-popup-image:hover img {transform: scale(1.05);}
.ai-product-popup-details h3 {margin: 0px; font-size: 15px; font-weight: 500; color: #212529; margin-bottom:5px;}
.ai-product-popup-price {font-size: 16px;font-weight: 700;color: #000;}
.ai-product-popup-actions{display: flex; gap: 5px; margin-top:15px;}
.ai-product-popup-btn {padding: 5px 15px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border-radius: 40px; border: solid 2px #000;}
.ai-product-popup-btn:hover{background:#000;color:#fff;}

/* Product popup when chatbox is maximized */
#ai-chat-box.maximized .ai-product-popup-image {height: 355px; display: flex; align-items: center; justify-content: center;}
#ai-chat-box.maximized .ai-product-popup-image img {width: auto; height: 100%; object-fit: contain;}

/* Responsive design for product popup */
@media (max-width: 768px) {
	.ai-product-popup-content {padding: 16px; border-radius: 12px 12px 0 0; height: 80%;}
	.ai-product-popup-image {height: 280px; margin-bottom: 16px;}
	.ai-product-popup-details h3 {font-size: 18px;}
	.ai-product-popup-price {font-size: 16px;}
	.ai-product-popup-actions {flex-direction: column; gap: 10px;}
	.ai-product-popup-btn {padding: 14px 20px; font-size: 15px;}
}

/* AI Response Text Styles */
.ai-response-text {line-height: 1.6; margin: 0;}
.ai-response-text-offers {line-height: 1.6; margin: 0px;}

/* Coupon Code Styles */
.coupon-code {cursor: pointer; background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-family: monospace;}

/* Discount instruction styles */
.discount-instruction {margin: 15px 0 10px 0;}
.discount-instruction-text {font-size: 14px; margin: 0; font-style: italic;}

/* Discount Loading Message Styles */
.discount-loading {background: white !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; margin: 10px 0 !important; padding: 15px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;}
.discount-loading .message-content {display: flex; align-items: center; gap: 12px;}
.discount-loading .typing-indicator {display: flex; align-items: center; gap: 4px;}
.discount-loading .typing-indicator span {width: 8px; height: 8px; background: #666; border-radius: 50%; animation: discountTypingDot 1.4s infinite ease-in-out;}
.discount-loading .typing-indicator span:nth-child(1) {animation-delay: -0.32s;}
.discount-loading .typing-indicator span:nth-child(2) {animation-delay: -0.16s;}
.discount-loading .typing-indicator span:nth-child(3) {animation-delay: 0s;}
.discount-loading .loading-text {color: #666; font-size: 14px; font-style: italic;}

@keyframes discountTypingDot {
	0%, 80%, 100% {transform: scale(0.8); opacity: 0.5;}
	40% {transform: scale(1); opacity: 1;}
}

/* AI Notification Styles */
.ai-notification {position: fixed; top: 20px; right: 20px; border-radius: 4px; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 10000; font-size: 14px; max-width: 300px; word-wrap: break-word; animation: slideInRight 0.3s ease-out;}
.ai-notification-success {background: #d4edda; color: #155724; border: 1px solid #c3e6cb;}
.ai-notification-error {background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;}
.ai-notification-info {background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb;}
.ai-notification-warning {background: #fff3cd; color: #856404; border: 1px solid #ffeaa7;}
.text-copied {background-color: #fff3cd !important; border-color: #ffeaa7 !important; animation: pulse 0.5s ease-in-out;}
@keyframes slideInRight {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(100%); opacity: 0; }
}
@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* Responsive design for order question button */
@media (max-width: 768px) {
	.order-question-section {padding: 16px; margin-top: 16px;}
	.order-question-prompt h4 {font-size: 16px;}
	.order-question-prompt p {font-size: 13px;}
	.order-question-btn {padding: 10px 20px; font-size: 13px;}
	.order-selection-message {padding: 12px;}
	.clear-order-selection-btn {padding: 6px 12px; font-size: 12px;}
}

/* AI Popup Overlay Styles */
.ai-popup-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 10000;}
.ai-popup-content {background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); max-width: 90%; max-height: 90%; overflow: hidden; position: relative;}

/* Discount Popup Styles - Similar to Product Popup */
#ai-discount-popup {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; display: none; opacity: 0; transition: opacity 0.3s ease}
#ai-discount-popup.show {display: flex;opacity: 1;}
#ai-discount-popup .ai-popup-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(1px); border-radius: 12px; z-index: 1;}
#ai-discount-popup .ai-popup-content {position: absolute; bottom: 0; left: 0; right: 0; width: 100%; background: white; border-radius: 12px; height: 85%; overflow: hidden; transform: translateY(100%); transition: transform 0.3s ease; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); z-index: 2; display: flex; flex-direction: column; max-width: 100%;}
#ai-discount-popup.show .ai-popup-content {transform: translateY(0);}

/* Discount popup header */
#ai-discount-popup .ai-popup-header {display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #eee; background-color: #f8f9fa; flex-shrink: 0;}
#ai-discount-popup .ai-popup-header h3 {margin: 0; font-size: 18px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 flex: 1; min-width: 0; padding-right: 40px;}
#ai-discount-popup .ai-popup-close {position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 20px; color: #666; cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.2s ease; z-index: 3;}
#ai-discount-popup .ai-popup-close:hover {background-color: #f0f0f0; color: #333;}

/* Discount popup body */
#ai-discount-popup .ai-popup-body {flex: 1; padding: 15px; overflow-y: auto;}

/* Discount popup when chatbox is maximized */
#ai-chat-box.maximized #ai-discount-popup .ai-popup-content {height: 85%; display: flex; flex-direction: column;}
#ai-chat-box.maximized #ai-discount-popup .ai-popup-header { flex-shrink: 0; width: 100%;}
#ai-chat-box.maximized #ai-discount-popup .ai-popup-body {flex: 1; width: 100%; max-height: 100%; overflow-y: auto;}

.discounts-container .discount-container{margin-bottom: 15px !important; padding-bottom: 15px; border-bottom: 1px solid #e0e0e0;}
.discounts-container .discount-container .discount-coupon{background: #f0f0f0; padding: 5px 10px; border: dashed 1px #e0e0e0; border-radius: 5px;}
.discounts-container .discount-container .discount-coupon .coupon-code{padding: 0px; font-size: 17px !important;}
.discounts-container .discount-container .discount-header .discount-name{font-size: 15px !important; color: #000 !important; font-weight: 500 !important;}
.discounts-container .discount-container .discount-header .discount-value{font-weight: 600; font-size: 15px !important;}

/* Responsive design for discount popup */
@media (max-width: 768px) {
	#ai-discount-popup .ai-popup-content {height: 80%;}
	#ai-discount-popup .ai-popup-header {padding: 12px 16px;}
	#ai-discount-popup .ai-popup-header h3 {font-size: 16px;padding-right: 35px;}
	#ai-discount-popup .ai-popup-close {top: 12px;right: 16px;font-size: 18px;}
	#ai-discount-popup .ai-popup-body {padding: 16px;}
}

.ai-popup-header {display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #eee; background-color: #f8f9fa;}
.ai-popup-header h2 {margin: 0; color: #333; font-size: 20px;}
.ai-popup-close {background: none; border: none; font-size: 24px; cursor: pointer; color: #666; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;}
.ai-popup-close:hover {color: #000; background-color: #e9ecef; border-radius: 50%;}
.ai-popup-body {padding: 20px; max-height: 60vh; overflow-y: auto;}
.ai-popup-footer {padding: 20px; border-top: 1px solid #eee; background-color: #f8f9fa; text-align: right;}
.ai-popup-close-btn {background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px;}
.ai-popup-close-btn:hover {background-color: #0056b3;}

/* Discount Product Listing Styles */
.discount-products-section {margin-top: 20px;}
.discount-products-title {margin: 0 0 16px 0; color: #333; font-size: 18px; font-weight: 600; text-align: center;}
.discount-products-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px;}
.discount-product-item {background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px; height: 100%; display: grid; grid-template-columns: 30% 65%; align-items: flex-start; gap: 15px;}
.discount-product-image {width: 100%; height: auto; border-radius: 6px; overflow: hidden; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center;}
.discount-product-image img {width: 100%;height: auto;object-fit: cover;transition: transform 0.3s ease;}
.discount-product-image:hover img {transform: scale(1.05);}
.discount-product-details {flex: 1;display: flex;flex-direction: column;}
.discount-product-name {margin: 0px;color: #333;font-size: 15px;font-weight: 500; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; margin-bottom:5px;}
.discount-product-price {color: #000;font-size: 16px;font-weight: 700;margin-top: auto;}
.discount-product-actions {margin-top: 15px; text-align: center; display: flex; gap: 5px; align-items: center;}
.discount-product-view-btn {display: inline-block; border: solid 2px #000; color: #000; text-decoration: none; padding: 5px 15px; border-radius: 40px; font-size: 13px; font-weight: 600; transition: all 0.3s ease; cursor: pointer;}
.discount-product-view-btn:hover {background: #000; color: white; text-decoration: none;}
.discount-product-view-btn:active {transform: translateY(0);box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);}
.discount-product-cart-btn {display: inline-block; border: solid 2px #000; color: #000; text-decoration: none; padding: 5px 15px; border-radius: 40px; font-size: 13px; font-weight: 600; transition: all 0.3s ease; cursor: pointer;}
.discount-product-cart-btn:hover {background: #000; color: white; text-decoration: none;}
.discount-product-cart-btn:active {transform: translateY(0);box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);}

/* Responsive design for discount products */
@media (max-width: 768px) {
	.discount-products-grid {grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;}
	.discount-product-item {padding: 12px;}
	.discount-product-image {height: 150px;}
	.discount-product-name {font-size: 15px;}
	.discount-product-price {font-size: 16px;}
	.discount-product-view-btn {padding: 8px 16px;font-size: 13px;}
	.discount-product-cart-btn {padding: 8px 16px;font-size: 13px;}
}

@media (max-width: 480px) {
	.discount-products-grid {grid-template-columns: 1fr;gap: 10px;}
	.discount-products-section {padding: 16px;}
	.discount-product-image {height: 140px;}
}

/* Discount Categories Section Styles */
.discount-categories-section {margin-top: 20px;}
.discount-categories-title {margin: 0 0 16px 0; font-size: 17px; color: #000; position: relative; font-weight: 600; text-align: center;}
.discount-categories-title:before{content: ''; width: 24%; height: 1px; background: #000; position: absolute; left: 0px; top: 50%; margin-top: 1px;}
.discount-categories-title:after{content: ''; width: 24%; height: 1px; background: #000; position: absolute; right: 0px; top: 50%; margin-top: 1px;}

.discount-description-main {font-size: 16px; text-align:center;}
.discount-description-main .bogo-product-link {color: #007bff;text-decoration: underline;font-weight: 600;transition: color 0.2s ease;}
.discount-description-main .bogo-product-link:hover {color: #0056b3;text-decoration: none;}

/* Discount coupon code section */
.discount-coupon-section {margin: 16px 0; padding: 12px; background-color: #f8f9fa; border: 1px dashed #a1a1aa; border-radius: 8px; text-align: center;}
.discount-coupon-label {font-size: 13px;font-weight: 600;color: #333;margin-bottom: 8px;}
.discount-coupon-codes {display: flex;flex-wrap: wrap;gap: 8px;align-items: center; justify-content: center;}
.discount-coupon-code {color: #000;padding: 6px 12px;border-radius: 4px;font-family: 'Courier New', monospace;font-weight: 600;cursor: pointer;transition: background-color 0.2s ease;user-select: none; font-size: 20px; border:dotted 1px #0056b3}
.discount-coupon-code:hover {background-color: #0056b3; color:#fff;}
.coupon-separator {color: #666;font-weight: 500;}
.discount-categories-list {display: flex;flex-direction: column;gap: 8px;}
.discount-category-item {display: flex; align-items: center; padding: 12px 16px; border: 1px solid #a1a1aa; border-radius: 5px; text-decoration: none; color: #333; transition: all 0.3s ease; background: #f8f9fa;}
.discount-category-item:hover {text-decoration: none; border-color: #007bff;}
.category-icon {font-size: 16px;margin-right: 12px;transition: transform 0.3s ease; width:20px}
.category-icon img{width:100%; height:auto;}
.category-name {flex: 1;font-size: 15px;font-weight: 500;}
.category-arrow {font-size: 14px;color: #6c757d;transition: all 0.3s ease;}

/* Inline category links in description */
.discount-category-link {color: #007bff;text-decoration: none;font-weight: 500;padding: 2px 6px;border-radius: 4px;background-color: rgba(0, 123, 255, 0.1);transition: all 0.3s ease;}
.discount-category-link:hover {background-color: #007bff;color: white;text-decoration: none;transform: translateY(-1px);box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);}

/* Responsive design for discount categories */
@media (max-width: 768px) {
	.discount-categories-section {padding: 16px;}
	.discount-category-item {padding: 10px 14px;}
	.category-name {font-size: 14px;}
	.category-icon {font-size: 14px; margin-right: 10px;}
}

@media (max-width: 480px) {
	.discount-categories-section {padding: 12px;}
	.discount-category-item {padding: 8px 12px;}
	.category-name {font-size: 13px;}
}

/* Returns/Refunds Order Details Styles */
.returns-order-details-container {background: #fff; border-radius: 8px; border: 0px solid #e0e0e0; margin: 0px; overflow: hidden;}
.returns-order-details-container .receipt-container .products-section.product-section-returns{border-radius: 8px; border: 1px solid #e0e0e0; margin-bottom:15px!important;}
.returns-order-details-container .receipt-container  .products-section .products-header{font-size:13px!important;}
.returns-order-details-container .receipt-container  .products-section .returns-form{margin:0px!important; padding:0px!important;}
.returns-order-details-container .receipt-container  .products-section .returns-form .products-list{border:0px!important; border-radius:8px!important;}
.returns-order-details-container .receipt-container .products-section .returns-form .products-list .product-item{border:0px!important; border-radius: 8px !important;}
.returns-order-details-container .receipt-container .products-section .product-selection{border:0px!important; border-radius:0px 0px 8px 8px!important}


.returns-options-section {background: #f8f9fa; padding: 16px; border-radius: 8px; border: 1px solid #e0e0e0;}
.returns-options-header {margin-bottom: 16px;}
.returns-options-header h4 {margin: 0 0 8px 0; color: #333; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px;}
.returns-options-header h4 i {color: #6c757d; font-size: 14px;}
.returns-options-header p {margin: 0; color: #6c757d; font-size: 13px; line-height: 1.4;}
.returns-request-types {margin-bottom: 16px;}
.request-type-options {display: grid; gap: 8px; margin-bottom: 12px;}
.request-type-option {display: flex; align-items: center; cursor: pointer; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px; background: #fff; transition: all 0.2s ease; position: relative;}
.request-type-option:hover {border-color: #007bff; background: #f8f9fa;}
.request-type-option input[type="radio"] {margin: 0; margin-right: 8px; accent-color: #007bff;}
.request-type-option input[type="radio"]:checked + .option-label {color: #007bff; font-weight: 600;}
.request-type-option:has(input[type="radio"]:checked) {border-color: #007bff; background: #e3f2fd;}
.option-label {display: flex; align-items: center; gap: 6px; font-size: 13px; color: #495057; transition: all 0.2s ease; flex: 1;}
.option-label i {font-size: 14px; color: #6c757d;}
.request-type-option:has(input[type="radio"]:checked) .option-label i {color: #007bff;}
.returns-comment-section {margin-bottom: 16px;}
.returns-comment-section label {display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: #495057;}
.returns-comment-section textarea {width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid #dee2e6; border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box; transition: border-color 0.2s ease;}
.returns-comment-section textarea:focus {outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);}
.returns-comment-section textarea::placeholder {color: #adb5bd; font-style: italic;}
.returns-submit-section {text-align: center;}
.returns-submit-btn {background: #000; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);}
.returns-submit-btn:hover {background:##000;}
.returns-submit-btn:active {transform: translateY(0); box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);}
.returns-submit-btn:disabled, .returns-submit-btn.disabled {background: #6c757d !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; opacity: 0.7 !important; pointer-events: none !important;}
.returns-submit-btn:disabled:hover, .returns-submit-btn.disabled:hover {background: #6c757d !important; transform: none !important; box-shadow: none !important;}
.returns-submit-btn i {font-size: 14px;}

/* Spinner animation for loading state */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.returns-submit-btn .fa-spinner {animation: spin 1s linear infinite;}

/* Responsive adjustments for returns/refunds */
@media (max-width: 480px) {
	.request-type-options {grid-template-columns: 1fr; gap: 6px;}
	.request-type-option {padding: 6px 10px;}
	.option-label {font-size: 12px;}
	.returns-submit-btn {padding: 10px 20px; font-size: 13px;}
	.returns-options-section {padding: 12px;}
}

/* Disable background scroll */
/* Disable page scroll */
body.ai-floating-icon {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

/* 2025-01-XX: Support Contact Options Styles */
/* Date: 2025-01-XX - Explanation: Styles for Call Us and Contact Us buttons in AI Assistant */
.ai-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.ai-support-btn:hover {
  background: #e0e0e0;
  border-color: #bbb;
  transform: translateY(-1px);
}

.ai-support-btn i {
  font-size: 11px;
}

/* 2025-01-XX: Call Us Sliding Panel Styles */
/* Date: 2025-01-XX - Explanation: Styles for sliding panel that shows support phone number */
.ai-call-us-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 200px;
}

.ai-call-us-panel.visible {
  transform: translateY(0);
}

.ai-call-us-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}

.ai-call-us-panel-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.ai-call-us-close {
  background: none;
  border: none;
  color: #666;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.ai-call-us-close:hover {
  color: #000;
}

.ai-call-us-panel-content {
  padding: 20px 16px;
  text-align: center;
}

.ai-call-us-panel-content p {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #666;
}

.ai-call-us-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #000;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.ai-call-us-phone-link:hover {
  background: #333;
  transform: translateY(-1px);
}

.ai-call-us-phone-link i {
  font-size: 14px;
}

/* 2025-01-XX: Contact Us Popup Styles */
/* Date: 2025-01-XX - Explanation: Styles for contact form popup that covers the chat window */
.ai-contact-us-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ai-contact-us-popup.visible {
  opacity: 1;
}

.ai-contact-us-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.ai-contact-us-popup-content {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
  padding: 24px;
}

.ai-contact-us-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #f8f9fa;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1;
}

.ai-contact-us-popup-close:hover {
  background: #e9ecef;
  transform: scale(1.1);
}

.ai-contact-us-popup-close i {
  font-size: 16px;
  color: #6c757d;
}

#ai-contact-us-form-container h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

#ai-contact-us-form .form-group {
  margin-bottom: 16px;
}

#ai-contact-us-form .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

#ai-contact-us-form .form-group input,
#ai-contact-us-form .form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

#ai-contact-us-form .form-group input:focus,
#ai-contact-us-form .form-group textarea:focus {
  outline: none;
  border-color: #000;
}

#ai-contact-us-form .form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.ai-contact-us-error {
  padding: 10px 12px;
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
}

.ai-contact-us-submit {
  width: 100%;
  padding: 12px 24px;
  background: #000;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-contact-us-submit:hover:not(:disabled) {
  background: #333;
  transform: translateY(-1px);
}

.ai-contact-us-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.ai-contact-us-success {
  text-align: center;
  padding: 20px;
}

.ai-contact-us-success-icon {
  font-size: 48px;
  color: #28a745;
  margin-bottom: 16px;
}

.ai-contact-us-success h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.ai-contact-us-success p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Responsive design for Contact Us popup */
@media (max-width: 768px) {
  .ai-contact-us-popup-content {
    width: 95%;
    padding: 20px;
    max-height: 85vh;
  }

  .ai-call-us-panel {
    max-height: 180px;
  }

  .ai-call-us-panel-content {
    padding: 16px;
  }

  .ai-call-us-phone-link {
    padding: 10px 20px;
    font-size: 14px;
  }
}