/**
 * TAZDUCA CHATBOT INPUT FIX
 * Corregir área de texto y eliminar botones innecesarios
 */

/* ============================================
   MOSTRAR BOTONES DE CONTROL DEL HEADER
   ============================================ */

/* Mostrar los botones del header (minimizar y cerrar) */
#tazduca-chatbot .chatbot-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Ajustar el header con botones de control */
#tazduca-chatbot .chatbot-header {
    padding: 12px 20px !important;
    gap: 12px !important;
    justify-content: space-between !important;
    display: flex !important;
    align-items: center !important;
}

/* Área de información del chat */
#tazduca-chatbot .chatbot-info {
    flex: 1 !important;
    margin-right: 0 !important;
}

/* ============================================
   ARREGLAR ÁREA DE INPUT - SOLO BOTÓN ENVIAR
   ============================================ */

/* Container del input simplificado */
#tazduca-chatbot .input-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-radius: 24px !important;
    padding: 4px 4px 4px 16px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: visible !important;
}

/* Asegurar que el input funcione correctamente */
#tazduca-chatbot #chatbot-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 14px !important;
    color: #1F2937 !important;
    padding: 10px 0 !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    min-width: 0 !important;
    width: 100% !important;
    
    /* Forzar que sea editable */
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    
    /* Asegurar que no esté deshabilitado */
    disabled: false !important;
    readonly: false !important;
}

/* Placeholder del input */
#tazduca-chatbot #chatbot-input::placeholder {
    color: #9CA3AF !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Focus state del input */
#tazduca-chatbot .input-container:focus-within {
    background: white !important;
    border-color: #667eea !important;
    box-shadow: 
        0 0 0 3px rgba(102, 126, 234, 0.1),
        0 2px 8px rgba(102, 126, 234, 0.15) !important;
    transform: translateY(-1px) !important;
}

#tazduca-chatbot #chatbot-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================
   BOTÓN ENVIAR - ÚNICO BOTÓN
   ============================================ */

/* Botón de enviar mejorado */
#tazduca-chatbot #chatbot-send {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border: none !important;
    color: white !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;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

#tazduca-chatbot #chatbot-send i {
    font-size: 16px !important;
    color: white !important;
    z-index: 1 !important;
    transition: all 0.2s ease !important;
}

/* Hover effect del botón enviar */
#tazduca-chatbot #chatbot-send:hover {
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
    background: linear-gradient(135deg, #5b52e5, #8b5cf6) !important;
}

#tazduca-chatbot #chatbot-send:hover i {
    transform: scale(1.1) rotate(15deg) !important;
}

/* Active state */
#tazduca-chatbot #chatbot-send:active {
    transform: scale(0.95) translateY(0) !important;
}

/* Ripple effect para el botón */
#tazduca-chatbot #chatbot-send::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
}

#tazduca-chatbot #chatbot-send:hover::before {
    width: 100%;
    height: 100%;
}

/* ============================================
   ELIMINAR BOTONES INNECESARIOS
   ============================================ */

/* Ocultar botón de voz si existe */
#tazduca-chatbot #chatbot-voice {
    display: none !important;
}

/* Ocultar cualquier otro botón en el input area */
#tazduca-chatbot .input-container button:not(#chatbot-send) {
    display: none !important;
}

/* ============================================
   ASEGURAR FUNCIONALIDAD DEL INPUT
   ============================================ */

/* Remover cualquier overlay que pueda bloquear el input */
#tazduca-chatbot .input-container::before,
#tazduca-chatbot .input-container::after {
    pointer-events: none !important;
}

/* Asegurar que el input esté por encima de otros elementos */
#tazduca-chatbot #chatbot-input {
    z-index: 10 !important;
    position: relative !important;
}

/* Remover cualquier máscara o overlay */
#tazduca-chatbot .input-container * {
    pointer-events: auto !important;
}

/* ============================================
   ÁREA DE INPUT SIMPLIFICADA
   ============================================ */

/* Simplificar el área de input */
#tazduca-chatbot .chatbot-input-area {
    padding: 16px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-top: 1px solid rgba(102, 126, 234, 0.1) !important;
    backdrop-filter: blur(20px) !important;
}

/* Ocultar sugerencias si están causando problemas */
#tazduca-chatbot .input-suggestions {
    display: none !important;
}

/* ============================================
   RESPONSIVE PARA MÓVIL
   ============================================ */

@media (max-width: 480px) {
    #tazduca-chatbot .input-container {
        padding: 3px 3px 3px 12px !important;
        gap: 6px !important;
    }
    
    #tazduca-chatbot #chatbot-send {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    #tazduca-chatbot #chatbot-send i {
        font-size: 14px !important;
    }
    
    #tazduca-chatbot #chatbot-input {
        font-size: 16px !important; /* Prevenir zoom en iOS */
        padding: 8px 0 !important;
    }
}

/* ============================================
   DEBUG - ASEGURAR VISIBILIDAD
   ============================================ */

/* Forzar visibilidad del input en caso de problemas */
#tazduca-chatbot #chatbot-input {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Asegurar que el container sea clickeable */
#tazduca-chatbot .input-container {
    pointer-events: auto !important;
    position: relative !important;
}

/* ============================================
   ESTILOS DE ESTADO DEL INPUT
   ============================================ */

/* Input activo */
#tazduca-chatbot #chatbot-input:focus {
    color: #1F2937 !important;
    background: transparent !important;
}

/* Input con texto */
#tazduca-chatbot #chatbot-input:not(:placeholder-shown) {
    color: #1F2937 !important;
    font-weight: 500 !important;
}

/* Selección de texto */
#tazduca-chatbot #chatbot-input::selection {
    background: rgba(102, 126, 234, 0.2) !important;
    color: #1F2937 !important;
}