
.chatbot { position: fixed; bottom: 112px; right: 20px; width: 360px; max-height: 500px; background: #fff; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.2); display: none; flex-direction: column; overflow: hidden; z-index: 9999; } .chatbot.open { display: flex; } .chat-header { background: var(--primary-color); color: #fff; padding: 10px; display: flex; align-items: center; font-weight: bold; } .chat-header img { width: 36px; height: 36px; border-radius: 50%; margin-right: 10px; } .chat-header span { font-size: 14px; } .chat-body { flex: 1; padding: 10px; overflow-y: auto; background: #f9f9f9; } .msg { margin: 8px 0; display: flex; } .msg.bot { justify-content: flex-start; } .msg.user { justify-content: flex-end; } .bubble { padding: 10px; border-radius: 10px; font-size: 14px; max-width: 75%; } .msg.bot .bubble { background: #eee; color: #000; } .msg.user .bubble { background: var(--primary-color); color: #fff; } .options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .options button { border: 1px solid var(--primary-color); background: #fff; color: var(--primary-color); padding: 8px; border-radius: 8px; cursor: pointer; font-size: 14px; text-align: left; } .options button:hover { background: var(--primary-color); color: #fff; } .chat-input { display: flex; padding: 8px; border-top: 1px solid #ddd; gap: 5px; } .country-code { width: 70px; padding: 6px; border: 1px solid #ccc; border-radius: 6px; } .chat-input input { flex: 1; padding: 6px; border: 1px solid #ccc; border-radius: 6px; } .send-btn { background: var(--primary-color); border: none; color: #fff; padding: 0 14px; border-radius: 6px; cursor: pointer; } .chatbot-toggle, .chatbot-close { position: fixed; right: 20px; width: 55px; height: 55px; border-radius: 12px; border: none; cursor: pointer; background: var(--primary-color); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 10000; } .chatbot-toggle { bottom: 52px; border-radius: 50%; } .chatbot-close { bottom: 52px; display: none; }
