.chat-container { 
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  width: 300px; 
  /* Default width for desktop */ 
  max-width: 90vw; 
  /* Prevents overflow on small screens */ 
  background-color: #fff; 
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  z-index: 1000; 
  /* Stays on top */ 
  font-family: Arial, sans-serif; 
} 
.chat-header { 
   background-color: green; 
   /* Matches Solidarité CI's blue theme */ 
   color: #fff; 
   padding: 10px; 
   border-top-left-radius: 10px; 
   border-top-right-radius: 10px; 
   display: flex; 
   justify-content: space-between; 
   align-items: center; 
   cursor: pointer; 
   font-size: 16px; 
   /* Default font size */ 
 } 
.chat-toggle { 
   background: none; 
   border: none; 
   color: #fff; 
   font-size: 18px; 
   cursor: pointer; 
 } 
 .chat-body { 
   display: block; 
   /* Visible by default */ 
   padding: 10px; 
} 
.chat-body.hidden { 
   display: none; 
   /* Hidden when minimized */ 
} 
.chat-messages { 
   height: 200px; 
   /* Default height for desktop */ 
   max-height: 50vh; 
   /* Limits height on small screens */ 
   overflow-y: auto; 
   margin-bottom: 10px; 
   border: 1px solid #ddd; 
   padding: 10px; 
} 
.chat-input { 
   display: flex; 
   gap: 5px; 
} 
.chat-input input { 
   flex: 1; 
   padding: 8px; 
   border: 1px solid #ddd; 
   border-radius: 5px; 
   font-size: 14px; 
} 
.chat-input button { 
   padding: 8px 12px; 
   background-color: green; 
   color: #fff; 
   border: none; 
   border-radius: 5px; 
   cursor: pointer; 
   font-size: 14px; 
} 
.chat-input button:hover { 
   background-color: darkgreen; 
} 
/* Responsive Design: Mobile screens (max-width: 600px) */ 
@media (max-width: 600px) { 
   .chat-container { 
      width: 80vw; 
	  /* Smaller width for mobile */ 
	  bottom: 10px; 
	  /* Closer to bottom */ 
	  right: 10px; 
	  /* Closer to right edge */ 
	} 
	.chat-header { 
	  font-size: 14px; 
	  /* Smaller font for mobile */ 
	  padding: 8px; 
	} 
	.chat-toggle { 
	  font-size: 16px; 
	  /* Smaller toggle button */ 
	} 
	.chat-messages { 
	  height: 150px; 
	  /* Smaller chat area for mobile */ 
	  max-height: 40vh; 
	  /* Adjust height for smaller screens */ 
	} 
	.chat-input input, .chat-input button { 
	  font-size: 12px; 
	  /* Smaller text for mobile */ 
	  padding: 6px; 
	  /* Smaller padding */ 
	} 
} 
/* Very small screens (e.g., older phones, max-width: 400px) */ 
@media (max-width: 400px) { 
   .chat-container { 
      width: 90vw; 
	  /* Nearly full width */ 
	  bottom: 5px; right: 5px; 
   } 
   .chat-messages { 
      height: 120px; 
	  /* Even smaller chat area */ 
	} 
}