/* /var/www/soguify.com/assets/css/chat_widget.css */

/* --- CONTAINER --- */
#soguify-chat-widget {
    position: fixed; bottom: 20px; right: 20px; z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- BOUTON FLOTTANT (Toggle) --- */
#chat-widget-toggle {
    width: 60px; height: 60px; border-radius: 50%;
    background-color: var(--primary, #0084ff); /* Couleur adaptative */
    color: white; border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease;
    padding: 0;
}
#chat-widget-toggle:hover { transform: scale(1.1); }

/* Style SVG Bulle */
#chat-widget-toggle svg {
    width: 30px; height: 30px;
    fill: white; 
    pointer-events: none;
}

/* Badge Notification */
#chat-notification-badge {
    position: absolute; top: -2px; right: -2px;
    background-color: #E74C3C; color: white;
    font-size: 11px; font-weight: bold;
    border-radius: 50%; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid white;
}

/* --- FENÊTRE DE CHAT --- */
#chat-widget-box {
    position: absolute; bottom: 80px; right: 0;
    width: 360px; height: 550px; max-height: calc(100vh - 100px);
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0; transform: translateY(20px); pointer-events: none;
    border: 1px solid rgba(0,0,0,0.05);
}
#soguify-chat-widget.open #chat-widget-box { opacity: 1; transform: translateY(0); pointer-events: all; }

/* --- HEADER --- */
.chat-header {
    background-color: var(--primary, #0084ff);
    color: white; padding: 12px 15px;
    display: flex; justify-content: space-between; align-items: center;
}

.merchant-info { display: flex; align-items: center; gap: 10px; }

/* Logo Rond du Marchand */
.header-logo {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    object-fit: cover;
    background-color: white;
}

.header-text { display: flex; flex-direction: column; line-height: 1.2; }
.merchant-name { font-weight: 700; font-size: 15px; }
.status-text { font-size: 11px; opacity: 0.9; display: flex; align-items: center; gap: 4px; }
.status-dot { width: 7px; height: 7px; background-color: #2ecc71; border-radius: 50%; }

/* Bouton Fermer (Croix) */
#chat-widget-close {
    background: transparent; border: none; color: white;
    cursor: pointer; padding: 5px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.8; transition: opacity 0.2s, transform 0.3s;
}
#chat-widget-close:hover { opacity: 1; transform: rotate(90deg); }

#chat-widget-close svg {
    width: 24px; height: 24px;
    stroke: white; /* Important pour le SVG stroke */
}

/* --- MESSAGES --- */
#chat-widget-messages {
    flex: 1; padding: 15px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
    background-color: #f2f2f2;
}

.message { max-width: 85%; display: flex; flex-direction: column; margin-bottom: 2px; position: relative; }
.message.sent { align-self: flex-end; }
.message.received { align-self: flex-start; }

.message .bubble {
    padding: 9px 13px; font-size: 14px; line-height: 1.4;
    border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    word-wrap: break-word;
}
.message.sent .bubble { background-color: #d9fdd3; color: #111b21; border-top-right-radius: 0; }
.message.received .bubble { background-color: #ffffff; color: #111b21; border-top-left-radius: 0; }

.meta-time { font-size: 10px; color: #999; text-align: right; margin-top: 3px; }

/* --- ZONE SAISIE --- */
.chat-widget-input-area { padding: 10px; background-color: #fff; border-top: 1px solid #eee; }

#chat-widget-form {
    display: flex; align-items: center; gap: 8px;
    background: #f0f2f5; padding: 6px; border-radius: 24px;
}

#chat-widget-textarea {
    flex: 1; border: none; background: transparent; padding: 8px 10px;
    resize: none; height: 36px; font-family: inherit; font-size: 14px; outline: none;
}

/* Bouton Envoyer (Avion) */
#chat-widget-send {
    background-color: var(--primary, #0084ff);
    border: none; width: 36px; height: 36px;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: filter 0.2s;
    padding: 0;
}
#chat-widget-send:hover { filter: brightness(0.9); }

#chat-widget-send svg {
    width: 18px; height: 18px;
    stroke: white;
    margin-left: 2px; margin-top: 2px;
}

/* --- MASQUAGE DES ÉLÉMENTS PARASITES DU HUB --- */
.message-actions-menu, 
.reply-context-bubble,
.msg-status,
.delete-btn, 
.reply-btn,
.action-btn { 
    display: none !important; 
}

.message-img { max-width: 100% !important; height: auto; border-radius: 8px; }

/* --- MOBILE (VERSION CORRIGÉE) --- */
@media (max-width: 768px) { /* On élargit à 768px pour couvrir les tablettes aussi */
    
    #chat-widget-box {
        /* On force la position fixe par rapport à l'ÉCRAN, pas au bouton */
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important; /* Sécurité pour certains navigateurs mobiles */
        bottom: auto;
        right: auto;
        border-radius: 0;
        z-index: 200000; /* Très haut pour passer au-dessus du header mobile */
        
        /* Animation mobile : vient du bas vers le haut */
        transform: translateY(100%); 
        opacity: 1; /* On gère la visibilité via transform sur mobile */
        transition: transform 0.3s ease-in-out;
    }

    #soguify-chat-widget.open #chat-widget-box {
        transform: translateY(0); /* Glisse vers le haut */
        opacity: 1;
    }

    /* Ajustement du bouton toggle sur mobile pour qu'il ne gêne pas le clavier */
    #soguify-chat-widget.open #chat-widget-toggle {
        display: none; /* On cache le bouton quand le chat est ouvert plein écran */
    }

    /* Ajustements internes pour le confort mobile */
    .chat-header {
        padding: 15px;
        height: 60px; /* Hauteur fixe pour le header */
    }

    #chat-widget-messages {
        /* Scroll fluide sur mobile */
        -webkit-overflow-scrolling: touch; 
        padding-bottom: 20px;
    }
    
    /* Zone de saisie fixée en bas */
    .chat-widget-input-area {
        padding: 10px;
        /* Gère le clavier virtuel sur iPhone */
        padding-bottom: env(safe-area-inset-bottom, 10px); 
    }
}