/* ===== IDCO — Chatbot ===== */

.chatbot-toggle {
    position: fixed; bottom: 30px; right: 100px;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--gold); color: var(--white); border: none;
    font-size: 1.4rem; cursor: pointer; z-index: var(--z-whatsapp);
    box-shadow: 0 4px 20px rgba(201,169,110,0.35);
    transition: all 0.4s;
    display: flex; align-items: center; justify-content: center;
}
.chatbot-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(201,169,110,0.5); }
.chatbot-toggle.active { background: var(--text); }
.chatbot-badge {
    position: absolute; top: -2px; right: -2px;
    width: 18px; height: 18px; background: #e74c3c;
    border-radius: 50%; font-size: 0.55rem; color: var(--white);
    display: flex; align-items: center; justify-content: center;
    animation: pulse 2s infinite;
}
.chatbot-window {
    position: fixed; bottom: 100px; right: 30px;
    width: 380px; max-height: 520px;
    background: var(--white); border-radius: 16px;
    box-shadow: 0 20px 60px var(--shadow-lg);
    z-index: var(--z-chatbot); display: none;
    flex-direction: column; overflow: hidden;
    animation: fadeInUp 0.3s ease;
}
.chatbot-window.open { display: flex; }
.chatbot-header {
    background: var(--dark); color: var(--white); padding: 18px 20px;
    display: flex; align-items: center; gap: 12px;
}
.chatbot-header .bot-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gold); display: flex; align-items: center;
    justify-content: center; font-size: 0.9rem; flex-shrink: 0;
}
.chatbot-header .bot-info h3, .chatbot-header .bot-info h4 { font-size: 0.85rem; font-weight: 500; letter-spacing: 1px; }
.chatbot-header .bot-info span { font-size: 0.65rem; color: #4caf50; }
.chatbot-close { background: none; border: none; color: var(--white); font-size: 1.2rem; cursor: pointer; margin-left: auto; }
.chatbot-messages {
    flex: 1; overflow-y: auto; padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
    max-height: 320px; scroll-behavior: smooth;
}
.chat-msg {
    max-width: 85%; padding: 12px 16px;
    font-size: 0.82rem; line-height: 1.6;
    border-radius: 16px; word-wrap: break-word;
}
.chat-msg.bot { background: #f5f0e8; color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.user { background: var(--gold); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg a { color: inherit; text-decoration: underline; }
.chat-msg .chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-msg .chat-files img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; }
.chat-msg .chat-files .pdf-badge { background: rgba(255,255,255,0.2); padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; }
.chat-quick-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-quick-btn {
    background: var(--white); border: 1px solid var(--gold); color: var(--gold);
    padding: 6px 12px; border-radius: 20px; font-size: 0.7rem;
    cursor: pointer; transition: all 0.3s; font-family: inherit;
}
.chat-quick-btn:hover { background: var(--gold); color: var(--white); }
.chatbot-input {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--border-light);
}
.chatbot-input input {
    flex: 1; border: none; outline: none;
    font-family: inherit; font-size: 0.82rem; color: var(--text); padding: 8px 0;
}
.chatbot-input .chat-attach {
    background: none; border: none; color: var(--gold);
    font-size: 1.1rem; cursor: pointer; position: relative;
}
.chatbot-input .chat-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 30px; }
.chatbot-input .chat-send {
    background: var(--gold); border: none; color: var(--white);
    width: 34px; height: 34px; border-radius: 50%;
    font-size: 0.85rem; cursor: pointer; transition: background 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.chatbot-input .chat-send:hover { background: #b8944f; }
.chat-typing { display: flex; gap: 4px; padding: 12px 16px; align-self: flex-start; }
.chat-typing span { width: 8px; height: 8px; background: #ccc; border-radius: 50%; animation: typing 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

/* Responsive */
@media (max-width: 768px) {
    .chatbot-window { width: calc(100vw - 20px); right: 10px; bottom: 90px; max-height: 70vh; }
    .chatbot-toggle { right: 80px; }
}