/* =========================================================
   AI CHATBOT WIDGET — floating bubble + panel
   Included on every page via both layouts.
   ========================================================= */

#chatbotBubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--royal-500), var(--royal-600));
    color: var(--white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(36, 81, 232, 0.4);
    z-index: 200;
    transition: transform var(--duration-fast) var(--ease);
}
#chatbotBubble:hover { transform: scale(1.06); }
#chatbotBubble svg { transition: opacity var(--duration-fast) var(--ease); }
#chatbotBubble .icon-close { display: none; }
#chatbotBubble.open .icon-chat { display: none; }
#chatbotBubble.open .icon-close { display: block; }

#chatbotBubble .unread-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--white);
    display: none;
}
#chatbotBubble.has-unread .unread-dot { display: block; }

#chatbotPanel {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 140px);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 199;
    border: 1px solid var(--border-color);
}
#chatbotPanel.open { display: flex; }

.chatbot-header {
    background: var(--navy-900);
    color: var(--white);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.chatbot-header .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--royal-500), var(--royal-600));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
}
.chatbot-header .title { font-weight: 700; font-size: var(--text-sm); }
.chatbot-header .subtitle { font-size: var(--text-xs); color: var(--gray-400); display: flex; align-items: center; gap: 5px; }
.chatbot-header .subtitle .dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }

.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--gray-50);
}

.chatbot-msg { max-width: 85%; font-size: var(--text-sm); line-height: 1.5; }
.chatbot-msg.user { align-self: flex-end; }
.chatbot-msg.assistant { align-self: flex-start; }

.chatbot-msg-bubble { padding: 10px 14px; border-radius: var(--radius-md); white-space: pre-wrap; }
.chatbot-msg.user .chatbot-msg-bubble { background: var(--royal-600); color: var(--white); border-bottom-right-radius: 4px; }
.chatbot-msg.assistant .chatbot-msg-bubble { background: var(--white); border: 1px solid var(--border-color); color: var(--text-primary); border-bottom-left-radius: 4px; }

.chatbot-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); border-bottom-left-radius: 4px; }
.chatbot-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); animation: typingBounce 1.2s infinite ease-in-out; }
.chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chatbot-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--space-4) var(--space-3); background: var(--gray-50); }
.chatbot-suggestion-chip {
    font-size: var(--text-xs); padding: 6px 12px; border-radius: var(--radius-full);
    background: var(--white); border: 1px solid var(--border-color); color: var(--royal-600); font-weight: 600;
}
.chatbot-suggestion-chip:hover { border-color: var(--royal-400); }

.chatbot-input-row {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--border-color);
    background: var(--white);
}
.chatbot-input-row textarea {
    flex: 1;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    resize: none;
    max-height: 90px;
}
.chatbot-input-row textarea:focus { outline: none; border-color: var(--royal-500); box-shadow: 0 0 0 3px var(--royal-100); }
.chatbot-send-btn {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: var(--royal-600); color: var(--white); border: none;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chatbot-send-btn:disabled { opacity: 0.5; }
.chatbot-send-btn:hover:not(:disabled) { background: var(--royal-500); }

.chatbot-footer-link { text-align: center; padding: 6px; font-size: 11px; color: var(--text-muted); background: var(--white); }

@media (max-width: 640px) {
    #chatbotPanel { right: 12px; bottom: 88px; width: calc(100vw - 24px); height: calc(100vh - 160px); }
    #chatbotBubble { right: 16px; bottom: 16px; }
}