/**
 * style.css
 * VERSION FINALE INTUITIVE ET AUTONOME - THÈME SOMBRE
 * 
 * Ce fichier contient tous les styles nécessaires pour le widget de chat.
 * Il est structuré de manière logique :
 * 1. Variables de Thème (le panneau de contrôle des couleurs et tailles)
 * 2. Styles de Base (reset minimaliste)
 * 3. Mise en Page Principale du Widget
 * 4. Composants Internes du Widget (messages, formulaires, etc.)
 * 5. Styles Utilitaires (barre de scroll)
 */

/* ========================================================================== */
/*  1. VARIABLES DE THÈME (Votre Panneau de Contrôle)                        */
/* ========================================================================== */
:root {
    /* --- Palette de Couleurs --- */
    --bg-main: #1e1e1e;          /* Fond le plus sombre (en-tête, scrollbar) */
    --bg-card: #2d2d2d;          /* Fond principal du widget */
    --bg-input: #3c3c3c;         /* Fond des champs de saisie et boutons */
    
    --text-light: #e0e0e0;       /* Couleur du texte principal */
    --text-muted: #888888;       /* Couleur du texte secondaire (timestamps) */
    
    --accent-color: #4a90e2;     /* Couleur d'accentuation (pseudos, liens) */
    
    --border-color: #444444;     /* Couleur des bordures */
    --border-color-focus: var(--accent-color); /* Couleur des bordures au focus */

    /* --- Tailles et Espacements --- */
    --border-radius: 8px;        /* Rayon des bordures pour un look moderne */
    --widget-width: 370px;
    --widget-height: 500px;
    
    /* --- Animations --- */
    --transition-speed: 0.2s;    /* Vitesse des animations d'ouverture/fermeture */
}

/* ========================================================================== */
/*  2. STYLES DE BASE (Reset minimal pour le widget)                         */
/* ========================================================================== */
#chat-widget-container *,
#chat-widget-container *::before,
#chat-widget-container *::after {
    box-sizing: border-box;
}

#chat-widget-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ========================================================================== */
/*  3. MISE EN PAGE PRINCIPALE DU WIDGET                                      */
/* ========================================================================== */

/** Conteneur principal qui positionne le widget sur la page **/
#chat-widget-container {
    position: fixed; /* Reste fixe lors du défilement de la page */
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

/** Bouton flottant pour ouvrir/fermer le chat **/
#chat-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background-color: #18b035;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.2s ease;
	opacity: 0.8
}
#chat-toggle-btn .icon svg {
    width: 100%;
    height: 100%;
}
#chat-toggle-btn:hover {
    transform: scale(1.1);
}
#chat-toggle-btn .icon {
    width: 40px;
    height: 40px;
}

/** Fenêtre principale du chat **/
.chat-body {
    position: absolute;
    bottom: 90px; /* Espace au-dessus du bouton flottant */
    right: 0;
    width: var(--widget-width);
    height: var(--widget-height);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    
    /* Structure flexible pour organiser l'en-tête, le contenu et le formulaire */
    display: flex;
    flex-direction: column;
    
    /* Animation d'apparition */
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-speed) ease-in-out;
}

/** État "ouvert" de la fenêtre de chat **/
.chat-body.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* ========================================================================== */
/*  4. COMPOSANTS INTERNES DU WIDGET                                          */
/* ========================================================================== */

/* --- En-tête --- */
.chat-header {
    background-color: var(--bg-main);
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer; /* Permet de fermer en cliquant sur l'en-tête */
    flex-shrink: 0; /* Empêche l'en-tête de rétrécir */
}
.chat-title { font-weight: bold; color: var(--text-light); }
#user-count { color: var(--text-muted); font-size: 0.9em; cursor: pointer; text-decoration: underline; }

/* --- Zone de contenu principal --- */
.chat-content {
    flex-grow: 1; /* Prend toute la place restante */
    position: relative; /* Contexte de positionnement pour la liste d'utilisateurs */
    overflow: hidden; /* Empêche les éléments internes de déborder de manière non contrôlée */
}

/* --- Zone d'affichage des messages --- */
#chat-area {
    padding: 15px;
    height: 100%;
    overflow-y: auto; /* Ajoute une barre de défilement si nécessaire */
}
#chat-area p:not(:last-child) { margin-bottom: 1em; } /* Espacement pour les paragraphes dans les messages */

/* --- Messages individuels --- */
.message-system, .message-user { margin-bottom: 8px; word-wrap: break-word; }
.message-system { color: var(--text-muted); font-style: italic; font-size: 0.9em; }
.message-user strong { margin-right: 5px; color: var(--accent-color); font-weight: 600; }
.timestamp { color: var(--text-muted); font-size: 0.8em; margin-right: 8px; }
.message-user a { color: var(--accent-color-hover); text-decoration: underline; }

/* --- Liste des utilisateurs (popup) --- */
#user-list-popup {
    position: absolute;
    top: 0; right: 0;
    width: 150px;
    height: 100%;
    background-color: var(--bg-card);
    border-left: 1px solid var(--border-color);
    padding: 15px;
    transform: translateX(100%); /* Caché par défaut */
    transition: transform var(--transition-speed) ease-in-out;
}
#user-list-popup.is-active {
    transform: translateX(0); /* Visible quand la classe est ajoutée */
}
#user-list-popup h3 { color: var(--text-light); margin-bottom: 1em; }

/* --- Formulaire d'envoi de message --- */
#send-form {
    display: flex;
    padding: 10px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Empêche le formulaire de rétrécir */
}

/** Bouton flottant (mise à jour pour le positionnement de la pastille) **/
#chat-toggle-btn {
    position: relative; /* Contexte de positionnement pour la pastille */
    /* ... (les autres styles du bouton restent les mêmes) ... */
}

/** La pastille de notification elle-même **/
#chat-notification-badge {
    position: absolute;
    top: 5px;  /* Position en haut à droite */
    right: 5px;
    
    width: 22px; /* Taille fixe */
    height: 22px;
    
    background-color: #ff3860; /* Rouge vif (couleur de danger de Bulma) */
    color: white;
    
    border: 2px solid var(--bg-card); /* Petite bordure pour se détacher */
    border-radius: 50%; /* Forme de cercle parfait */
    
    /* Centrage du nombre (si on en met un plus tard) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    
    /* Animation d'apparition */
    transform: scale(0);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effet "pop" */
}

/** Classe pour afficher la pastille **/
#chat-notification-badge.is-visible {
    transform: scale(1);
    opacity: 1;
}


#send-form .control { flex-grow: 0; }
#send-form .control.is-expanded { flex-grow: 1; }
#send-form .button, #send-form .input { border-radius: 4px; border: 1px solid var(--border-color); }
#send-form .button { margin-left: 5px; }
#send-form .input { width: 100%; background-color: var(--bg-input); color: var(--text-light); padding: 0.5em 0.75em; }
#send-form .input::placeholder { color: var(--text-muted); }
#send-form .input:focus { border-color: var(--border-color-focus); outline: none; }
#send-form .button { background-color: var(--bg-input); color: var(--text-light); cursor: pointer; }
#send-form .button.is-info { background-color: var(--accent-color); border-color: var(--accent-color); color: white; }

/* --- Sélecteur d'emojis --- */
#emoji-picker {
    position: absolute;
    bottom: 60px; /* Juste au-dessus du formulaire */
    left: 10px;
    z-index: 1050;
    visibility: hidden;
    opacity: 0;
    transition: all var(--transition-speed) ease;
}
#emoji-picker.show {
    visibility: visible;
    opacity: 1;
}

/* ========================================================================== */
/*  5. STYLES UTILITAIRES                                                     */
/* ========================================================================== */

/** Barre de scroll sombre pour les navigateurs Webkit (Chrome, Safari, Edge) **/
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--bg-input); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }