/* Style pour le chatbox - Design Messenger/WhatsApp */

/* Boutons parfaitement circulaires - bouton plus encore plus petit */
#chatbox-plus-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    background-color: #1877f2 !important;
    color: white !important;
}

#chatbox-plus-btn:hover {
    background-color: #166fe5 !important;
    transform: scale(1.05) !important;
}

#chatbox-send-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    outline: none !important;
}

/* Bouton d'envoi - vert puis bleu */
#chatbox-send-btn {
    background-color: #00a884 !important;
    color: white !important;
}

#chatbox-send-btn:hover {
    background-color: #008f72 !important;
    transform: scale(1.05) !important;
}

#chatbox-send-btn.bg-blue-500 {
    background-color: #1877f2 !important;
}

#chatbox-send-btn.bg-blue-500:hover {
    background-color: #166fe5 !important;
}

/* Bouton d'envoi désactivé */
#chatbox-send-btn.disabled {
    background-color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

#chatbox-send-btn.disabled:hover {
    background-color: #9ca3af !important;
    transform: none !important;
}

/* Input avec bordure arrondie comme Messenger */
#chatbox-input {
    border-radius: 20px !important;
    border: 1px solid #e4e6ea !important;
    padding: 8px 16px !important;
    padding-right: 40px !important; /* Espace pour le bouton emoji */
    font-size: 13px !important; /* text-xs */
    background-color: #f0f2f5 !important;
    transition: all 0.2s ease !important;
    min-height: 32px !important;
    /* Propriétés pour le retour à la ligne automatique */
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    resize: none !important;
    overflow: hidden !important;
    font-weight: 500 !important;
}

#chatbox-input:focus {
    outline: none !important;
    border-color: #e4e6ea !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

#chatbox-input::placeholder {
    color: #65676b !important;
    font-size: 13px !important; /* text-xs */
}

/* Bouton emoji dans l'input */
#chatbox-input-emoji-btn {
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#chatbox-input-emoji-btn:hover {
    background-color: rgba(24, 119, 242, 0.1) !important;
}

/* Sélecteur de fichiers */
#chatbox-file-selector {
    background-color: white !important;
    border: 1px solid #e4e6ea !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000 !important;
}

#chatbox-file-selector button {
    border: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    padding: 12px !important;
}

#chatbox-file-selector button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Sélecteur d'emojis */
#chatbox-emoji-selector {
    background-color: white !important;
    border: 1px solid #e4e6ea !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000 !important;
}

#chatbox-emoji-selector .emoji-btn {
    border: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    font-size: 16px !important;
}

#chatbox-emoji-selector .emoji-btn:hover {
    background-color: #f0f2f5 !important;
    transform: scale(1.1) !important;
}

/* Scrollbar pour le sélecteur d'emojis */
#chatbox-emoji-selector .overflow-y-auto::-webkit-scrollbar {
    width: 4px;
}

#chatbox-emoji-selector .overflow-y-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#chatbox-emoji-selector .overflow-y-auto::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

#chatbox-emoji-selector .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Toolbar style - boutons plus petits */
#chatbox-toolbar {
    background-color: #f8f9fa !important;
    border-top: 1px solid #e4e6ea !important;
    transition: all 0.3s ease !important;
}

#chatbox-toolbar button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    border: none !important;
    background-color: transparent !important;
    color: #1877f2 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#chatbox-toolbar button:hover {
    background-color: #e4e6ea !important;
}

/* Zone de saisie */
.chatbox-input-area {
    padding: 12px 16px !important;
    background-color: white !important;
    position: relative !important;
}

/* Container principal */
#chatbox-container {
    border: 1px solid #e4e6ea !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    position: fixed !important;
}

/* Animation des icônes */
#send-icon {
    transition: all 0.3s ease !important;
    color: white !important;
}

/* Suppression des styles par défaut */
button:focus {
    outline: none !important;
}

/* Style des messages */
#chatbox-messages {
    background-color: #ffffff !important;
}

/* Header style */
.chatbox-header {
    background: linear-gradient(135deg, #00a884 0%, #128c7e 100%) !important;
}

/* Responsive design */
@media (max-width: 640px) {
    #chatbox-container {
        width: calc(100vw - 1rem) !important;
        height: 75vh !important;
        bottom: 0.5rem !important;
        right: 0.5rem !important;
    }
    
    #chatbox-plus-btn {
        width: 20px !important;
        height: 20px !important;
    }
    
    #chatbox-send-btn {
        width: 28px !important;
        height: 28px !important;
    }
    
    #chatbox-toolbar button {
        width: 28px !important;
        height: 28px !important;
    }
    
    #chatbox-input {
        font-size: 14px !important; /* Éviter le zoom sur iOS */
    }
    
    #chatbox-input-emoji-btn {
        width: 20px !important;
        height: 20px !important;
    }
    
    #chatbox-file-selector {
        width: 240px !important;
    }
    
    #chatbox-emoji-selector {
        width: 260px !important;
    }
}

/* Animation des sélecteurs */
@keyframes slideDown {
    from {
        opacity: 0;
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    to {
        opacity: 0;
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Classes pour les sélecteurs */
.chatbox-selector-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
}

.chatbox-selector-hidden {
    opacity: 0 !important;
    transform: scale(0.95) !important;
    pointer-events: none !important;
}

/* Stabilisation de la zone de formulaire */
#chatbox-container .bg-white.rounded-b-lg {
    min-height: auto !important;
    flex-shrink: 0 !important;
}

/* Assurer que le bouton emoji reste stable */
#chatbox-input-emoji-btn {
    position: absolute !important;
    right: 12px !important;
    bottom: 8px !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* Empêcher l'interception des clics par d'autres scripts */
#chatbox-input-emoji-btn,
#chatbox-input-emoji-btn * {
    pointer-events: auto !important;
}

/* S'assurer que tous les éléments du chatbox ont la priorité */
[data-chatbox-button="true"],
[data-chatbox-button="true"] * {
    pointer-events: auto !important;
    user-select: none !important;
}

/* Sélecteur emoji - forcer l'affichage */
#chatbox-emoji-selector {
    z-index: 99999 !important;
    position: absolute !important;
}

#chatbox-emoji-selector.visible {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
}

/* Forcer les boutons à rester en bas */
#chatbox-container .p-4.flex.items-center.space-x-3 {
    align-items: flex-end !important;
    min-height: 56px !important; /* Hauteur minimum pour les boutons */
}

#chatbox-plus-btn {
    align-self: flex-end !important;
    margin-bottom: 4px !important;
    position: relative !important;
    bottom: 0 !important;
}

#chatbox-send-btn {
    align-self: flex-end !important;
    margin-bottom: 4px !important;
    position: relative !important;
    bottom: 0 !important;
}

/* Zone textarea flexible */
#chatbox-container .flex-1.relative {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}