/* ============================================
    ENCAPSULACIÓN CSS PARA CHATBOT CHI'P
    Todos los estilos con prefijo #chip-chatbot-wrapper
    ============================================ */

#chip-chatbot-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ========== BOTÓN FLOTANTE ========== */
#chip-chatbot-wrapper .chip-chat-fab {
    position: fixed !important;
    bottom: 350px !important;
    right: 24px !important;
    width: 64px !important;
    height: 64px !important;
    background: linear-gradient(135deg, #0C3376 0%, #0D3F82 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(12, 51, 118, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 99999 !important;
    border: none !important;
}

#chip-chatbot-wrapper .chip-chat-fab:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 32px rgba(12, 51, 118, 0.5) !important;
}

#chip-chatbot-wrapper .chip-chat-fab .material-icons {
    color: white !important;
    font-size: 28px !important;
    transition: transform 0.3s ease !important;
}

#chip-chatbot-wrapper .chip-chat-fab.active .material-icons {
    transform: rotate(180deg) !important;
}

#chip-chatbot-wrapper .chip-chat-fab.menu-open .material-icons {
    transform: rotate(45deg) !important;
}

/* ========== BADGE DE NOTIFICACIÓN ========== */
#chip-chatbot-wrapper .chip-chat-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #ff3131 !important;
    color: white !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(255, 49, 49, 0.4) !important;
    font-family: 'Nunito', Arial, sans-serif !important;
}

/* ========== MENÚ DE ACCIONES FLOTANTES ========== */
#chip-chatbot-wrapper .chip-action-menu {
    position: fixed !important;
    bottom: 100px !important;
    right: 24px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 12px !important;
    z-index: 99998 !important;
    animation: chipSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#chip-chatbot-wrapper .chip-action-menu.active {
    display: flex !important;
}

#chip-chatbot-wrapper .chip-action-btn {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
}

#chip-chatbot-wrapper .chip-action-btn:hover {
    transform: scale(1.1) !important;
}

#chip-chatbot-wrapper .chip-action-btn .material-icons {
    font-size: 24px !important;
    color: white !important;
}

#chip-chatbot-wrapper .chip-action-btn.whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
}

#chip-chatbot-wrapper .chip-action-btn.phone {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
}

#chip-chatbot-wrapper .chip-action-btn.email {
    background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%) !important;
}

/* Tooltips */
#chip-chatbot-wrapper .chip-action-btn::before {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    right: 70px !important;
    background: #273f5b !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
}

#chip-chatbot-wrapper .chip-action-btn::after {
    content: '' !important;
    position: absolute !important;
    right: 60px !important;
    border: 6px solid transparent !important;
    border-left-color: #273f5b !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

#chip-chatbot-wrapper .chip-action-btn:hover::before,
#chip-chatbot-wrapper .chip-action-btn:hover::after {
    opacity: 1 !important;
}

/* ========== CONTENEDOR DEL CHAT ========== */
#chip-chatbot-wrapper .chip-chat-container {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 400px !important;
    max-width: calc(100vw - 48px) !important;
    height: 800px !important;
    max-height: calc(100vh - 48px) !important;
    background: white !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 99999 !important;
    animation: chipSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#chip-chatbot-wrapper .chip-chat-container.active {
    display: flex !important;
}

@keyframes chipSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== HEADER DEL CHAT ========== */
#chip-chatbot-wrapper .chip-chat-header {
    background: linear-gradient(135deg, #0C3376 0%, #0D3F82 100%) !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 12px rgba(12, 51, 118, 0.2) !important;
    flex-shrink: 0 !important;
}

#chip-chatbot-wrapper .chip-chat-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#chip-chatbot-wrapper .chip-chat-avatar {
    width: 48px !important;
    height: 48px !important;
    background: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
}

#chip-chatbot-wrapper .chip-chat-avatar .material-icons {
    color: #0C3376 !important;
    font-size: 28px !important;
}

#chip-chatbot-wrapper .chip-chat-header-text h2 {
    color: white !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
    font-family: 'Nunito', Arial, sans-serif !important;
}

#chip-chatbot-wrapper .chip-chat-header-text p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 12px !important;
    margin: 0 !important;
    font-family: 'Nunito', Arial, sans-serif !important;
}

#chip-chatbot-wrapper .chip-chat-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

#chip-chatbot-wrapper .chip-chat-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: rotate(90deg) !important;
}

#chip-chatbot-wrapper .chip-chat-close .material-icons {
    color: white !important;
    font-size: 20px !important;
}

/* ========== ACCIONES RÁPIDAS ========== */
#chip-chatbot-wrapper .chip-quick-actions {
    padding: 16px 20px !important;
    background: linear-gradient(135deg, #ecf5fe 0%, #fff 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

#chip-chatbot-wrapper .chip-quick-actions-title {
    font-size: 12px !important;
    color: #6987ab !important;
    margin-bottom: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: 'Nunito', Arial, sans-serif !important;
}

#chip-chatbot-wrapper .chip-quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

#chip-chatbot-wrapper .chip-quick-action-btn {
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

#chip-chatbot-wrapper .chip-quick-action-btn:hover {
    border-color: #0C3376 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(12, 51, 118, 0.15) !important;
}

#chip-chatbot-wrapper .chip-quick-action-btn .material-icons {
    font-size: 24px !important;
    color: #0C3376 !important;
}

#chip-chatbot-wrapper .chip-quick-action-btn.whatsapp .material-icons {
    color: #25D366 !important;
}

#chip-chatbot-wrapper .chip-quick-action-btn.phone .material-icons {
    color: #4CAF50 !important;
}

#chip-chatbot-wrapper .chip-quick-action-btn.email .material-icons {
    color: #EA4335 !important;
}

#chip-chatbot-wrapper .chip-quick-action-label {
    font-size: 11px !important;
    color: #4b5d73 !important;
    font-weight: 600 !important;
    font-family: 'Nunito', Arial, sans-serif !important;
}

/* ========== ÁREA DE MENSAJES ========== */
#chip-chatbot-wrapper .chip-chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    background: #f8f9fa !important;
    scroll-behavior: smooth !important;
}

#chip-chatbot-wrapper .chip-chat-messages::-webkit-scrollbar {
    width: 6px !important;
}

#chip-chatbot-wrapper .chip-chat-messages::-webkit-scrollbar-track {
    background: transparent !important;
}

#chip-chatbot-wrapper .chip-chat-messages::-webkit-scrollbar-thumb {
    background: #cbd5e0 !important;
    border-radius: 3px !important;
}

/* ========== MENSAJES ========== */
#chip-chatbot-wrapper .chip-chat-msg {
    margin-bottom: 16px !important;
    display: flex !important;
    animation: chipFadeIn 0.3s ease !important;
}

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

#chip-chatbot-wrapper .chip-chat-msg.user {
    justify-content: flex-start !important;
}

#chip-chatbot-wrapper .chip-chat-msg.self {
    justify-content: flex-end !important;
}

#chip-chatbot-wrapper .chip-cm-msg-text {
    max-width: 75% !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    font-family: 'Nunito', Arial, sans-serif !important;
}

#chip-chatbot-wrapper .chip-chat-msg.user .chip-cm-msg-text {
    background: white !important;
    color: #273f5b !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

#chip-chatbot-wrapper .chip-chat-msg.self .chip-cm-msg-text {
    background: linear-gradient(135deg, #0C3376 0%, #0D3F82 100%) !important;
    color: white !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(12, 51, 118, 0.3) !important;
}

/* ========== TYPING INDICATOR ========== */
#chip-chatbot-wrapper .chip-chat-msg.typing .chip-cm-msg-text {
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#chip-chatbot-wrapper .chip-typing-dots {
    display: flex !important;
    gap: 4px !important;
}

#chip-chatbot-wrapper .chip-typing-dots span {
    width: 8px !important;
    height: 8px !important;
    background: #0C3376 !important;
    border-radius: 50% !important;
    animation: chipBounce 1.4s infinite ease-in-out !important;
}

#chip-chatbot-wrapper .chip-typing-dots span:nth-child(1) { 
    animation-delay: -0.32s !important; 
}

#chip-chatbot-wrapper .chip-typing-dots span:nth-child(2) { 
    animation-delay: -0.16s !important; 
}

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

/* ========== BOTONES DE TÓPICOS ========== */
#chip-chatbot-wrapper .chip-chat-topics {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

#chip-chatbot-wrapper .chip-chat-btn {
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: #273f5b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
}

#chip-chatbot-wrapper .chip-chat-btn:hover:not(:disabled) {
    background: #0C3376 !important;
    color: white !important;
    border-color: #0C3376 !important;
    transform: translateX(4px) !important;
}

#chip-chatbot-wrapper .chip-chat-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ========== INPUT AREA ========== */
#chip-chatbot-wrapper .chip-chat-input-area {
    padding: 16px !important;
    background: white !important;
    border-top: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

#chip-chatbot-wrapper .chip-chat-input-wrapper {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    background: #f8f9fa !important;
    border-radius: 24px !important;
    padding: 8px 16px !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
}

#chip-chatbot-wrapper .chip-chat-input-wrapper:focus-within {
    border-color: #0C3376 !important;
    background: white !important;
}

#chip-chatbot-wrapper .chip-chat-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 14px !important;
    font-family: 'Nunito', sans-serif !important;
    color: #273f5b !important;
    padding: 8px 0 !important;
}

#chip-chatbot-wrapper .chip-chat-input::placeholder {
    color: #a0aec0 !important;
}

#chip-chatbot-wrapper .chip-chat-send-btn {
    background: linear-gradient(135deg, #0C3376 0%, #0D3F82 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    opacity: 0.5 !important;
    flex-shrink: 0 !important;
}

#chip-chatbot-wrapper .chip-chat-send-btn.active {
    opacity: 1 !important;
}

#chip-chatbot-wrapper .chip-chat-send-btn:hover.active {
    transform: scale(1.1) !important;
}

#chip-chatbot-wrapper .chip-chat-send-btn .material-icons {
    color: white !important;
    font-size: 20px !important;
}

/* ========== FOOTER ========== */
#chip-chatbot-wrapper .chip-chat-footer {
    padding: 12px 20px !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #718096 !important;
    background: #f8f9fa !important;
    border-top: 1px solid #e2e8f0 !important;
    font-family: 'Nunito', Arial, sans-serif !important;
    flex-shrink: 0 !important;
}

/* ========== MENSAJE DE BIENVENIDA ========== */
#chip-chatbot-wrapper .chip-welcome-message {
    background: linear-gradient(135deg, #ecf5fe 0%, #fff 100%) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}

#chip-chatbot-wrapper .chip-welcome-message .material-icons {
    font-size: 48px !important;
    color: #0C3376 !important;
    margin-bottom: 8px !important;
}

#chip-chatbot-wrapper .chip-welcome-message h3 {
    color: #273f5b !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
    font-family: 'Nunito', Arial, sans-serif !important;
}

#chip-chatbot-wrapper .chip-welcome-message p {
    color: #6987ab !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    font-family: 'Nunito', Arial, sans-serif !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
    #chip-chatbot-wrapper .chip-chat-container {
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 85% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    #chip-chatbot-wrapper .chip-chat-fab {
        bottom: 350px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
    }

    #chip-chatbot-wrapper .chip-chat-fab .material-icons {
        font-size: 24px !important;
    }

    #chip-chatbot-wrapper .chip-action-menu {
        bottom: 84px !important;
        right: 16px !important;
    }

    #chip-chatbot-wrapper .chip-action-btn {
        width: 48px !important;
        height: 48px !important;
    }

    #chip-chatbot-wrapper .chip-action-btn .material-icons {
        font-size: 20px !important;
    }

    #chip-chatbot-wrapper .chip-action-btn::before {
        right: 60px !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    #chip-chatbot-wrapper .chip-quick-actions-grid {
        gap: 6px !important;
    }

    #chip-chatbot-wrapper .chip-quick-action-btn {
        padding: 10px 6px !important;
    }

    #chip-chatbot-wrapper .chip-quick-action-btn .material-icons {
        font-size: 20px !important;
    }

    #chip-chatbot-wrapper .chip-quick-action-label {
        font-size: 10px !important;
    }

    #chip-chatbot-wrapper .chip-cm-msg-text {
        max-width: 85% !important;
    }
}

@media (max-width: 400px) {
    #chip-chatbot-wrapper .chip-cm-msg-text {
        max-width: 90% !important;
    }
}