/* General Container */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    transition: all 0.3s ease;
  }
  
  /* General message styling */
  .message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    min-width: 15%;
  }
  
  /* Outgoing messages (align right) */
  .message.outgoing {
    align-self: flex-end;
    background-color: #000000;
    color: white;
  }
  
  /* Incoming messages (align left) */
  .message.incoming {
    align-self: flex-start;
  }
  
  .customTitle{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 12px;
    transition: all 0.3s ease;
  }
  
  /* Enlarged Logo in Initial View */
  .logo {
    width: 100px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
  }

  
  /* Initial Search View */
  .search-bar {
    width: 100%;
    max-width: 600px; /* Adjust maximum width as desired */
  }
  
  .search-bar input {
    width: 100%;
    padding: 16px 20px;
    font-size: 20px; /* Larger font size */
    border: 1px solid #dcdcdc;
    border-radius: 24px;
    outline: none;
  }

  /* Send Button */
  .search-bar .buttons {
    background: black;
    color: white;
    border: none;
    padding: 0;
    margin-top: 12px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    width: 150px; 
    text-align: center;
  }
  
  .search-bar .buttons:hover {
    background: #333;
  }

  
  
  /* Chat Container */
  .chat-container {
    width: 75%;
    max-width: 100%;
    height: 60%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
    position: absolute;
    top: 80px;
    bottom: 60px;
  }
  
  /* Enlarged Input in Active Chat View */
  .input-container {
    position: absolute;
    bottom: 20px;
    width: 100%;
    max-width: 75%; /* Adjust maximum width */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
  }
  
  .input-container input {
    flex: 1; /* Take up all available space */
    padding: 16px 20px;
    font-size: 18px;
    border: 1px solid #dcdcdc;
    border-radius: 24px;
    outline: none;
  }
  
  /* Send Button */
  .send-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  
  .send-button img {
    width: 24px;
    height: 24px;
  }
  
  /* Active search styling for the chat layout */
  .search-active .logo {
    position: absolute;
    top: 20px;
    width: 100px;
    margin-bottom: 0;
  }
  
  .search-active .search-bar,
  .search-active .buttons {
    display: none;
  }

  /* Title Below Logo */
  .search-active .customTitle2 {
    position: absolute;
    top: 125px;
    font-size: 20px;
    font-weight: bold;
    /* margin-top: 0px;*/
    text-align: center;
  }
  
  /* Larger Listeur Search Button */
  .buttons button {
    margin: 0;
    padding: 16px 32px;         /* Increase padding for larger size */
    font-size: 16px;            /* Increase font size */
    width: 100%;                /* Make the button full width within its container */
    max-width: 300px;           /* Optional: Set a max width */
    background-color: black;  /* Customize background color */
    color: white;               /* Button text color */
    border: none;
    border-radius: 8px;         /* Rounded corners */
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .buttons button:hover {
    transform: scale(1.05);     /* Slightly enlarge on hover for a visual effect */
  }