Update frontend/src/App.css

frontend/src/App.css

@@ -1,456 +1,480 @@
-/* ----- Disposition générale ----- */
-.App {
-  display: flex;               
-  min-height: 100vh;          
-  margin: 0;
-  background-image: url('../public/blurBackground.png'); 
-  background-size: cover; 
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed; 
-}
-.body{
-  background-image: url('../public/blurBackground.png');
-  background-size: cover; 
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed; 
-}
-
-/* ----- Panel latéral (sidebar) ----- */
-.sidebar-panel {
-  display: flex;
-  flex-direction: column;
-  width: 100%;      
-  max-width: 250px;    
-  height: 100vh; /* Add fixed height */
-  background-color: #1E2136;   
-  color: #ffffff;
-  overflow-y: auto;          
-  transition: max-width 0.3s ease;
-}
-
-   .App.panel-collapsed .main-content {
-    margin-left: 0;        
-  }
-  
-.sidebar-panel.collapsed {
-  max-width: 0;  
-  overflow: hidden;
-}
-
-/* ----- Contenu principal (zone de chat + header) ----- */
-.main-content {
-  flex: 1;                     
-  display: flex;
-  flex-direction: column;
-  transition: margin-left 0.3s ease;
-
-}
-.new-chat-button {
- 
-  background-color: #1e2136; 
-  border: none;
-  border-radius: 50%; 
-  
-  cursor: pointer;
-}
-
-.new-chat-button:hover {
-  background-color: #2a2d45; 
-}
-
-.new-chat-button svg {
-  width: 20px; 
-  height: 20px; 
-  fill: #ffffff; 
-}
-/* ----- Header du chat ----- */
-.chat-header {
-  display: flex;
-  position: relative;
-  justify-content: center; 
-  align-items: center; 
-  padding: 10px 15px;
-  color: #ffffff;
-  font-size: 1.3rem;
-  margin: 0;
-}
-.chat-header .avatar-container {
-  position: absolute;
-  right: 15px;
-  top: 50%;
-  transform: translateY(-50%); 
-}
-
-.chat-title {
-  font-weight: 400; 
-  font-size: 1.3rem; 
-  color: #ffffff; 
-  text-transform: uppercase; 
-  letter-spacing: 1px; 
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
-  font-family: 'Montserrat', sans-serif; 
-  text-align: center; 
-}
-/* ----- Conteneur du chat (zone de messages + input) ----- */
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-/* ----- Vue sans message : contenu centré ----- */
-.no-messages-view {
-  flex: 1;  
-  display: flex;
-  flex-direction: column;
-  justify-content: center; 
-  align-items: center;    
-  padding: 20px;
-  text-align: center;
-}
-.no-messages-view .welcome-message {
-  margin-bottom: 20px;
-  color:white;
-  font-size:1.5rem;
-}
-
-.no-messages-view .input-container {
-  position: relative;
-  bottom: auto;
-  left: auto;
-  right: auto;
-  margin-top: 20px;
-  width: 100%;
-}
-
-
-.welcome-content {
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  max-width: 600px;
-  width: 100%;
-  margin-bottom: 100px;
-}
-
-.no-messages-view .input-form {
-  max-width: 600px;
-  width: 100%;
-}
-
-/* ----- Zone des messages scrollable ----- */
-.messages-container {
-  flex: 1; 
-  overflow-y: auto; 
-  padding: 20px 15px;
-  display: flex;
-  flex-direction: column;
-  align-items: center; 
-  justify-content: flex-start; 
-  gap: 12px; 
-  margin-left: 10vw; 
-  margin-right: 10vw;
-  margin-bottom: 8vw; 
-}
-.messages-container::-webkit-scrollbar {
-
-  display:none;
-
-}
-
-@media (max-width: 768px) {
-  .messages-container {
-    margin-left: 5vw;
-    margin-right: 5vw;
-    margin-bottom: 100px; 
-  }
-}
-
-@media (max-width: 480px) {
-  .messages-container {
-    margin-left: 2vw;
-    margin-right: 2vw;
-    margin-bottom: 120px; /* Ajuste l'espace en bas pour les très petits écrans */
-  }
-}
-/* ----- Style des messages ----- */
-.message {
-  max-width: 70%; /* Limite la largeur des messages */
-  padding: 12px 16px;
-  border-radius: 8px;
-  word-break: break-word;
-  animation: fade-in 0.3s ease-in-out;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère */
-}
-.message.user {
-  align-self: flex-end; /* Aligne à droite */
-  background: rgba(67, 72, 105, 0.3);
-  backdrop-filter: blur(10px);
-  color: #ffffff;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-bottom-right-radius: 4px;
-}
-
-.message.bot .message-content{
-  display:flex;
-  align-self: flex-end;
-}
-.message.user .message-content{
-  display:flex;
-  align-self: flex-start;
-}
-.message.bot {
-  align-self: flex-start; 
-  color: #e1e1e1;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-bottom-left-radius: 4px;
-}
-
-/* ----- Animation pour l'apparition ----- */
-@keyframes fade-in {
-  from { opacity: 0; transform: translateY(5px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* ----- Indicateur de chargement ----- */
-.loading span {
-  display: inline-block;
-  animation: loading-dots 1.4s infinite ease-in-out;
-  font-size: 1.2rem;
-  margin-right: 2px;
-}
-
-@keyframes loading-dots {
-  0%, 80%, 100% { transform: scale(0); }
-  40% { transform: scale(1); }
-}
-
-.input-container {
-  position: fixed;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center; 
-  z-index: 999;
-  width: 100%;
-}
-.disclaimer-text {
-  font-size: 12px;
-  color: #666;
-  text-align: center;
-  margin-top: 8px;
-  font-style: italic;
-  max-width: 600px; 
-}
-
-.conversation-date{
-  font-size: 0.8rem;
-  font-style: italic;
-  margin-top: 2px;
-  color:rgb(183, 183, 183);
-}
-
-/* ----- Formulaire d'entrée ----- */
-.input-form {
-  display: flex;
-  align-items: center; 
-  justify-content: space-between; 
-  background: linear-gradient(180deg, #1E2136 0%, #1E2136 100%);
-  border-radius: 20px;
-  padding: 12px 16px;
-  width: 100%;
-  max-width: 600px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-}
-/* Input */
-.input-form input {
-  flex: 1; 
-  padding: 10px 12px;
-  border: none;
-  border-radius: 16px;
-  font-size: 14px;
-  outline: none;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.input-form textarea {
-  flex: 1;
-  padding: 10px 12px;
-  border: none;
-  border-radius: 16px;
-  font-size: 14px;
-  outline: none;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.8);
-  resize: none; 
-  overflow-y: auto; 
-  height: auto; 
-  max-height: 150px; 
-
-}
-.input-form textarea::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-  textarea::-webkit-scrollbar {
-    width: 12px; 
-}
-
-/* For Firefox */
-textarea {
-    scrollbar-width: thin; 
-    scrollbar-color: #acacac transparent; 
-}
-
-textarea:hover {
-    scrollbar-color: #b1b1b1 transparent; 
-}
-
-/* Placeholder */
-.input-form input::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-/* Bouton d'envoi */
-.input-form button {
-  display: flex;
-  align-items: center; 
-  justify-content: center; 
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 16px;
-  padding: 6px 12px; 
-  margin-left: 8px;
-  transition: opacity 0.2s;
-  border-radius: 50%; 
- 
-}
-
-.input-form button:hover {
-  opacity: 0.7;
-}
-
-/* Désactivation du bouton */
-.input-form button:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-h2{
-  display: block;
-  text-align: center;
-}
-/* ----- Bouton de collapse principal  ----- */
-.collapse-button-main {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  z-index: 999;       
-  background: none;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  font-size: 24px;    
-}
-
-/* ----- Icônes ----- */
-.material-icons {
-  vertical-align: middle;
-}
-
-/* ----- Liste des conversations dans le panel ----- */
-.conversations-list {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow-y: auto; 
-  max-height: calc(100vh - 100px); 
-}
-
-  
-  .conversations-list::-webkit-scrollbar {
-    width: 12px; 
-}
-
-.conversation-today-title{
-  display: flex;
-  margin-left: 6%;
-}
-.conversation-before-title{
-  display: flex;
-  margin-left: 6%;
-}
-.delete-button{
-  background: none;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  font-size: 24px;    
-  margin-left: auto;
-
-}
-/* For Firefox */
-.conversations-list {
-    scrollbar-width: thin; 
-    scrollbar-color: #acacac transparent; 
-}
-
-.conversations-list:hover {
-    scrollbar-color: #b1b1b1 transparent; 
-}
-
-.conversation-item {
-  padding: 8px;
-  gap: 12px;
-  border-bottom: 1px solid #525467;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.conversation-item:hover {
-  background-color: #525467;
-}
-
-.conversation-icon {
-  margin-right: 6px;
-}
-
-/* ----- Footer du panel ----- */
-.sidebar-footer {
-  margin-top: auto;
-  border-top: 1px solid #525467;
-  padding: 8px;
-}
-.sidebar-header{
-  display:flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.3rem;
-  padding-top:0.5rem;
-    padding-inline-start: calc(0.5rem);
-    padding-inline-end: calc(0.5rem);  ;}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.user-avatar {
-  font-size: 20px;
-}
-
-.collapse-button {
-  background: none;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-}
+/* ----- Disposition générale ----- */
+.App {
+  display: flex;               
+  min-height: 100vh;          
+  margin: 0;
+  background-image: url('../public/blurBackground.png'); 
+  background-size: cover; 
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed; 
+}
+.body{
+  background-image: url('../public/blurBackground.png');
+  background-size: cover; 
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed; 
+}
+
+/* À ajouter dans votre fichier CSS */
+.user-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px 0;
+  font-size: 0.9rem;
+}
+
+.logout-btn {
+  margin-top: 5px;
+  padding: 5px 10px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+
+.logout-btn:hover {
+  background-color: #d32f2f;
+}
+
+/* ----- Panel latéral (sidebar) ----- */
+.sidebar-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;      
+  max-width: 250px;    
+  height: 100vh; /* Add fixed height */
+  background-color: #1E2136;   
+  color: #ffffff;
+  overflow-y: auto;          
+  transition: max-width 0.3s ease;
+}
+
+   .App.panel-collapsed .main-content {
+    margin-left: 0;        
+  }
+  
+.sidebar-panel.collapsed {
+  max-width: 0;  
+  overflow: hidden;
+}
+
+/* ----- Contenu principal (zone de chat + header) ----- */
+.main-content {
+  flex: 1;                     
+  display: flex;
+  flex-direction: column;
+  transition: margin-left 0.3s ease;
+
+}
+.new-chat-button {
+ 
+  background-color: #1e2136; 
+  border: none;
+  border-radius: 50%; 
+  
+  cursor: pointer;
+}
+
+.new-chat-button:hover {
+  background-color: #2a2d45; 
+}
+
+.new-chat-button svg {
+  width: 20px; 
+  height: 20px; 
+  fill: #ffffff; 
+}
+/* ----- Header du chat ----- */
+.chat-header {
+  display: flex;
+  position: relative;
+  justify-content: center; 
+  align-items: center; 
+  padding: 10px 15px;
+  color: #ffffff;
+  font-size: 1.3rem;
+  margin: 0;
+}
+.chat-header .avatar-container {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%); 
+}
+
+.chat-title {
+  font-weight: 400; 
+  font-size: 1.3rem; 
+  color: #ffffff; 
+  text-transform: uppercase; 
+  letter-spacing: 1px; 
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
+  font-family: 'Montserrat', sans-serif; 
+  text-align: center; 
+}
+/* ----- Conteneur du chat (zone de messages + input) ----- */
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+/* ----- Vue sans message : contenu centré ----- */
+.no-messages-view {
+  flex: 1;  
+  display: flex;
+  flex-direction: column;
+  justify-content: center; 
+  align-items: center;    
+  padding: 20px;
+  text-align: center;
+}
+.no-messages-view .welcome-message {
+  margin-bottom: 20px;
+  color:white;
+  font-size:1.5rem;
+}
+
+.no-messages-view .input-container {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  margin-top: 20px;
+  width: 100%;
+}
+
+
+.welcome-content {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 600px;
+  width: 100%;
+  margin-bottom: 100px;
+}
+
+.no-messages-view .input-form {
+  max-width: 600px;
+  width: 100%;
+}
+
+/* ----- Zone des messages scrollable ----- */
+.messages-container {
+  flex: 1; 
+  overflow-y: auto; 
+  padding: 20px 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  justify-content: flex-start; 
+  gap: 12px; 
+  margin-left: 10vw; 
+  margin-right: 10vw;
+  margin-bottom: 8vw; 
+}
+.messages-container::-webkit-scrollbar {
+
+  display:none;
+
+}
+
+@media (max-width: 768px) {
+  .messages-container {
+    margin-left: 5vw;
+    margin-right: 5vw;
+    margin-bottom: 100px; 
+  }
+}
+
+@media (max-width: 480px) {
+  .messages-container {
+    margin-left: 2vw;
+    margin-right: 2vw;
+    margin-bottom: 120px; /* Ajuste l'espace en bas pour les très petits écrans */
+  }
+}
+/* ----- Style des messages ----- */
+.message {
+  max-width: 70%; /* Limite la largeur des messages */
+  padding: 12px 16px;
+  border-radius: 8px;
+  word-break: break-word;
+  animation: fade-in 0.3s ease-in-out;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère */
+}
+.message.user {
+  align-self: flex-end; /* Aligne à droite */
+  background: rgba(67, 72, 105, 0.3);
+  backdrop-filter: blur(10px);
+  color: #ffffff;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-bottom-right-radius: 4px;
+}
+
+.message.bot .message-content{
+  display:flex;
+  align-self: flex-end;
+}
+.message.user .message-content{
+  display:flex;
+  align-self: flex-start;
+}
+.message.bot {
+  align-self: flex-start; 
+  color: #e1e1e1;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-bottom-left-radius: 4px;
+}
+
+/* ----- Animation pour l'apparition ----- */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(5px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ----- Indicateur de chargement ----- */
+.loading span {
+  display: inline-block;
+  animation: loading-dots 1.4s infinite ease-in-out;
+  font-size: 1.2rem;
+  margin-right: 2px;
+}
+
+@keyframes loading-dots {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+.input-container {
+  position: fixed;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  z-index: 999;
+  width: 100%;
+}
+.disclaimer-text {
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+  margin-top: 8px;
+  font-style: italic;
+  max-width: 600px; 
+}
+
+.conversation-date{
+  font-size: 0.8rem;
+  font-style: italic;
+  margin-top: 2px;
+  color:rgb(183, 183, 183);
+}
+
+/* ----- Formulaire d'entrée ----- */
+.input-form {
+  display: flex;
+  align-items: center; 
+  justify-content: space-between; 
+  background: linear-gradient(180deg, #1E2136 0%, #1E2136 100%);
+  border-radius: 20px;
+  padding: 12px 16px;
+  width: 100%;
+  max-width: 600px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+/* Input */
+.input-form input {
+  flex: 1; 
+  padding: 10px 12px;
+  border: none;
+  border-radius: 16px;
+  font-size: 14px;
+  outline: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.input-form textarea {
+  flex: 1;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 16px;
+  font-size: 14px;
+  outline: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  resize: none; 
+  overflow-y: auto; 
+  height: auto; 
+  max-height: 150px; 
+
+}
+.input-form textarea::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+  textarea::-webkit-scrollbar {
+    width: 12px; 
+}
+
+/* For Firefox */
+textarea {
+    scrollbar-width: thin; 
+    scrollbar-color: #acacac transparent; 
+}
+
+textarea:hover {
+    scrollbar-color: #b1b1b1 transparent; 
+}
+
+/* Placeholder */
+.input-form input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Bouton d'envoi */
+.input-form button {
+  display: flex;
+  align-items: center; 
+  justify-content: center; 
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 16px;
+  padding: 6px 12px; 
+  margin-left: 8px;
+  transition: opacity 0.2s;
+  border-radius: 50%; 
+ 
+}
+
+.input-form button:hover {
+  opacity: 0.7;
+}
+
+/* Désactivation du bouton */
+.input-form button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+h2{
+  display: block;
+  text-align: center;
+}
+/* ----- Bouton de collapse principal  ----- */
+.collapse-button-main {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 999;       
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 24px;    
+}
+
+/* ----- Icônes ----- */
+.material-icons {
+  vertical-align: middle;
+}
+
+/* ----- Liste des conversations dans le panel ----- */
+.conversations-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto; 
+  max-height: calc(100vh - 100px); 
+}
+
+  
+  .conversations-list::-webkit-scrollbar {
+    width: 12px; 
+}
+
+.conversation-today-title{
+  display: flex;
+  margin-left: 6%;
+}
+.conversation-before-title{
+  display: flex;
+  margin-left: 6%;
+}
+.delete-button{
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 24px;    
+  margin-left: auto;
+
+}
+/* For Firefox */
+.conversations-list {
+    scrollbar-width: thin; 
+    scrollbar-color: #acacac transparent; 
+}
+
+.conversations-list:hover {
+    scrollbar-color: #b1b1b1 transparent; 
+}
+
+.conversation-item {
+  padding: 8px;
+  gap: 12px;
+  border-bottom: 1px solid #525467;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.conversation-item:hover {
+  background-color: #525467;
+}
+
+.conversation-icon {
+  margin-right: 6px;
+}
+
+/* ----- Footer du panel ----- */
+.sidebar-footer {
+  margin-top: auto;
+  border-top: 1px solid #525467;
+  padding: 8px;
+}
+.sidebar-header{
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.3rem;
+  padding-top:0.5rem;
+    padding-inline-start: calc(0.5rem);
+    padding-inline-end: calc(0.5rem);  ;}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.user-avatar {
+  font-size: 20px;
+}
+
+.collapse-button {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+}