html, body {
	width: 100%;
	height: 100%;
 margin:0;
 padding:0;
	overflow: hidden;

}
      .box div {
       width: 90px;
        display: inline-block;
        padding: 15px;
        text-align: center;
        color: #000000;
        font-family: arial, sans-serif;
      }
    
		textarea {
		border: none;
		outline: none;
			resize : none;
			}
		textarea:focus{
				text-decoration:none;
			}
			::placeholder {
  font-family:Helvetica;
font-size:15px;
			 
}	
/* code css d'affichage du message utilisateur */
	.lop{
    width: fit-content;      /* la largeur s'adapte au contenu */
    max-width: 40ch;        /* mais ne dépasse jamais cette limite */
    height: auto;            /* la hauteur s'adapte au contenu */
    max-height: 300px;       /* limite haute */
    overflow-y: auto;        /* scroll interne si le texte dépasse max-height */
    margin-left: auto;       /* pousse la bulle à droite */
    margin-right: 30%;      /* petite marge avec le bord droit de #visio */
    margin-top: 20px;
    margin-bottom: 20px;     /* espace avec #reponse qui suit en dessous */
    padding: 10px;
    border-radius: 10px;
    font-family: helvetica;
    font-size: 15px;
    line-height: 20px;
    background-color: #E0E0E0;
    word-wrap: break-word;
    text-align: center;
    box-sizing: border-box;  /* pour que padding n'agrandisse pas la largeur au-delà de max-width */
			}

/* code css d'affichage de la reponse */
			#reponse {
   min-height: 60px;      /* évite le saut de hauteur entre les deux états */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;         /* même padding pour reflexion ET machine à écrire */
    box-sizing: border-box;
}
/* code css du conteneur d'affichage */
			#visio{ 
			height:100px;
   overflow-y: auto;
	scrollbar-width:thin;
			}
				[data-theme="dark"] {
	background-color: #F0F0F2;
}

/* code css de la reflexion */
.reflexion {
     display: flex;
    align-items: left;
    gap: 10px;
    width: 100%;
}

.logo-pulse {
    width: 28px;
    height: 28px;
    animation: pulser 1.4s ease-in-out infinite;
}

@keyframes pulser {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

.bouton-copier {
    display: flex;
     width: fit-content;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.bouton-copier:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.bouton-copier svg {
    width: 14px;
    height: 14px;
}

.bouton-copier.copie {
    color: #16a34a;
    border-color: #16a34a;
}
.option-menu:hover {
    background-color: #f0f0f2;
}