body {
	font-family: Arial, sans-serif;
	background-color: #f4f4f9;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column; /* Disposition en colonne */
	justify-content: center;

	align-items: center;
	/*height: 100vh;  */
}

/* Photo de la tete  */
#expression-image {

    margin-bottom: -10px; /* Réduire l'espace sous l'image */
}



/* Menu déroulant remplace les boutons*/
/* Container for the menu */
.menu-container {
  text-align: center;
    justify-content: flex-start; /* Aligner à gauche */
    margin: 0px 0;
}

/* Style for the dropdown button */
/* Conteneur principal */
.action-bar {
	
    display: flex;
    align-items: center; /* Aligner verticalement */
    justify-content: center; /* Aligner au centre */
    gap: 10px; /* Espacement entre les éléments */
    padding: 0px;
}

/* Boutons */
.button-container button {
    margin: 0; /* Supprimer les marges inutiles */
}

/* Dropdown style (menu existant déjà stylé) */
.menu-container .dropdown {
    display: inline-block;
}

.dropbtn {
    background-color: #007bff;
    color: white;
    padding: 8px 8px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.dropbtn:hover {
    background-color: #0056b3;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #007bff;
    min-width: 100px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
}

.dropdown-content a {
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #0056b3;
}

.dropdown:hover .dropdown-content {
    display: block;
}







/* Pour entrer le login et mot de passe */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.modal-content {
    background: linear-gradient(to bottom, #ffffff, #f1f1f1);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 350px;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header h2 {
    margin: 0;
    padding-bottom: 10px;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.modal-body {
    margin-top: 15px;
}

.input-field {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.input-field:focus {
    border-color: #007BFF;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.submit-btn {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #0056b3;
}

.fermer {
    float: right;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    transition: color 0.3s;
}

.fermer:hover {
    color: #ff0000;
}









/*** Container du Chat   ***/

/* Conteneur principal */
.chat-container {

	
    display: flex;
    flex-direction: column; /* Par défaut : disposition en colonne pour écrans petits */
    gap: 20px;
}

/* Conteneur de l'image et des éléments associés */
.image-action-container {
	
    display: flex;
    flex-direction: column; /* Par défaut, vertical */
    gap: 20px;
    align-items: center;
}

/* Conteneur pour la disposition horizontale (grands écrans) */
.content-container {
    display: flex;
    flex-direction: column; /* Par défaut : disposition verticale */
    gap: 20px;
    width:100%;

    margin-left:0px;
 
}






.chat-container h2 {
	text-align: center;
	color: #333;
}




/* ********** ATTENTION : ICI c'est pour grand écran !!! ************** */
@media (min-width: 769px) {
    .chat-container {
	    margin-top: 25px;
        flex-direction: row; /* Passe en mode horizontal */
        align-items: flex-start; /* Aligne les contenus au sommet */
   
        
    }

    .image-action-container {
        flex: 0 0 auto; /* Fixe la taille du conteneur de l'image */
    }



    .content-container {
        flex: 1; /* Prend le reste de l'espace disponible */
        display: flex;
        flex-direction: column; /* Réorganise en colonne à droite de l'image */
        gap: 20px;
    }
    
    #chat-box {

        flex: 1; /* La boîte de chat prend tout l'espace vertical disponible */
        overflow-y: auto; /* Permet le défilement si nécessaire */
        min-height:250px;
        max-height:250px;
        
        width:700px;            /* GRAND ECRAN */
    }

    #emoji-container,
    .message-input-container {
        flex: 0 0 auto; /* Garde une taille naturelle pour ces éléments */
    }
    
    
    
    
    
}






/* Conteneur de boutons */
.button-container {
    display: flex;
    gap: 8px; /* Espacement entre les boutons */
    margin-top: 0px;
  
}

/* Styles pour chaque bouton */
.login-btn, .logout-btn,.logout2-btn, .choix-btn {
    flex: 1; /* Prendre une largeur égale pour chaque bouton */
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}

.logout2-btn {
   background-color: red;    /* Ecrase le vert précédent...  */
}



.login-btn:hover, .logout-btn:hover, .choix-btn:hover {
    background-color: #45a049;
}



.chat-image {
    display: block;
    margin: 5px auto;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}



.chat-box {
/*	min-height: 250px; 
	max-height: 250px !important; /* Force la hauteur fixe */
	
	width:330px;
	height: 250px;
    border: 1px solid #ddd;
    padding: 10px;
    overflow-y: auto;
    /*margin-top: 0px; */
    margin-bottom: -10px;
    background-color: #f9f9f9; 
 
    border-radius: 5px;

}



.message-input-container {
	display: flex;
}

.message-input {
	flex: 1;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.send-btn {
	background-color: #2196F3;
	color: white;
	border: none;
	padding: 10px 15px;
	margin-left: 10px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
}

.send-btn:hover {
	background-color: #1e87e5;
}


/* Style général pour l'overlay (fond de la boîte de dialogue) */
.choix-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9); /* Fond blanc avec transparence */
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Ombre pour l'effet de profondeur */
    z-index: 1000;
    width: 320px;
    text-align: center;
    animation: fadeIn 0.3s ease; /* Animation pour l'apparition */
}

/* Animation d'apparition en fondu */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Style des checkboxes */
.choix-dialog label {
    display: flex;
    align-items: center;
    margin: -8px 0; /* Réduit l'espace entre chaque ligne */
    padding: 2px 0; /* Ajuste l'espace à l'intérieur de chaque ligne */
    font-size: 1rem;
    color: #333;
}

/* Style des boutons de validation et annulation */
.dialog-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}

.dialog-buttons button {
    width: 45%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Styles spécifiques pour chaque bouton */
.dialog-buttons button:first-child {
    background-color: #4CAF50;
}

.dialog-buttons button:first-child:hover {
    background-color: #45a049;
}

.dialog-buttons button:last-child {
    background-color: #f44336;
}

.dialog-buttons button:last-child:hover {
    background-color: #d32f2f;
}





/* Styles pour les labels et les éléments de formulaire dans la boîte de dialogue config */
#config-dialog label {
    display: inline-block;
    width: 100px; /* Ajuster la largeur pour aligner */
    text-align: left;
    font-size: 1rem;
    margin-bottom: 8px;
    color: #333;
    vertical-align: middle;
}

#config-dialog select,
#config-dialog input[type="text"] {
    display: inline-block;
    vertical-align: middle;
    padding: 6px;
    width: calc(100% - 120px); /* Pour aligner avec la largeur du label */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}


/* Style spécifique pour l'alignement du label et de l'input du nom */
#config-dialog label[for="name-input"] {
    display: inline-block;
    width: 85px; /* Ajustez cette valeur selon vos besoins pour le label */
    text-align: left;
    vertical-align: middle;
}

#name-input {
    display: inline-block;
    width: calc(100% - 100px); /* Ajuste pour alignement avec le label */
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    vertical-align: middle;
}





/* Conteneur de smileys avec largeur limitée et défilement horizontal */
.emoji-container {
    max-width: 100%; /* Limite la largeur à celle du conteneur parent */
    overflow-x: auto; /* Défilement horizontal si le contenu dépasse la largeur */
    white-space: nowrap; /* Empêche les smileys de se mettre sur plusieurs lignes */
    padding: 2px 0; /* Espacement autour des smileys */
    border-bottom: 1px solid #ddd; /* Ligne de séparation avec la zone de saisie */
  
}

/* Style pour chaque smiley */
.emoji-container span {
    font-size: 1em; /* Taille des smileys */
    cursor: pointer; /* Curseur de type pointeur pour indiquer qu’ils sont cliquables */
    margin-right: 2px; /* Espacement entre chaque smiley */
}