/* ═══════════════════ CHATBOT ═══════════════════ */
.chatbot-wrapper { position: fixed; bottom: 30px; left: 30px; z-index: 9999; font-family: 'Almarai', sans-serif; }
.chatbot-toggle { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; border: none; box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4); font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chatbot-toggle:hover { transform: scale(1.1); box-shadow: 0 15px 30px rgba(245, 158, 11, 0.5); }
.chatbot-toggle.is-active { transform: rotate(90deg); background: var(--text-primary); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.3); }
.chatbot-window { position: absolute; bottom: 80px; left: 0; width: 360px; height: 500px; background: white; border-radius: 20px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(0,0,0,0.05); transform-origin: bottom left; }
.chatbot-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.chatbot-header-info { display: flex; align-items: center; gap: 12px; }
.chatbot-avatar { width: 40px; height: 40px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white; }
.chatbot-header h4 { margin: 0; font-size: 1.1rem; font-weight: 700; color: white; }
.chatbot-header p { margin: 0; font-size: 0.8rem; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 4px; }
.chatbot-header p::before { content: ''; display: block; width: 8px; height: 8px; background: #10b981; border-radius: 50%; }
.chatbot-close { background: transparent; border: none; color: rgba(255,255,255,0.7); font-size: 1.2rem; cursor: pointer; transition: color 0.3s; }
.chatbot-close:hover { color: white; }
.chatbot-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; background: #f8fafc; }
.chat-message { display: flex; max-width: 85%; }
.msg-bot { align-self: flex-start; }
.msg-user { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble { padding: 12px 16px; border-radius: 16px; font-size: 0.95rem; line-height: 1.5; }
.msg-bot .msg-bubble { background: white; color: #1e293b; border-bottom-right-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.02); }
.msg-user .msg-bubble { background: var(--primary); color: white; border-bottom-left-radius: 4px; box-shadow: 0 2px 5px rgba(245, 158, 11, 0.2); }
.chat-link { color: var(--primary); text-decoration: underline; font-weight: 700; }
.msg-user .chat-link { color: white; }
.chatbot-suggestions { padding: 0 20px 10px; display: flex; gap: 8px; overflow-x: auto; flex-wrap: nowrap; background: #f8fafc; -ms-overflow-style: none; scrollbar-width: none; }
.chatbot-suggestions::-webkit-scrollbar { display: none; }
.suggestion-chip { background: white; border: 1px solid var(--primary); color: var(--primary); padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.suggestion-chip:hover { background: var(--primary); color: white; }
.chatbot-input-area { padding: 15px 20px; background: white; border-top: 1px solid rgba(0,0,0,0.05); display: flex; gap: 10px; }
.chatbot-input { flex: 1; border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; padding: 10px 15px; font-size: 0.95rem; outline: none; transition: border 0.3s; font-family: 'Almarai', sans-serif; }
.chatbot-input:focus { border-color: var(--primary); }
.chatbot-send { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; }
.chatbot-send:disabled { background: #cbd5e1; cursor: not-allowed; }
.chatbot-send:not(:disabled):hover { background: var(--primary-dark); transform: scale(1.05); }
.typing-indicator span { display: inline-block; width: 6px; height: 6px; background-color: #94a3b8; border-radius: 50%; margin: 0 2px; animation: bounce 1.4s infinite ease-in-out both; }
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
.chat-enter { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chat-enter-start { opacity: 0; transform: scale(0.9) translateY(20px); }
.chat-enter-end { opacity: 1; transform: scale(1) translateY(0); }
.chat-leave { transition: all 0.2s ease-in; }
.chat-leave-start { opacity: 1; transform: scale(1) translateY(0); }
.chat-leave-end { opacity: 0; transform: scale(0.9) translateY(20px); }
@media (max-width: 480px) { 
    .chatbot-window { width: calc(100vw - 40px); bottom: 70px; left: 20px; height: 60vh; max-height: 500px; } 
    .chatbot-wrapper { left: 20px; bottom: 20px; } 
}