1  /* Reset the body to cover the full page */
  2  html, body {
  3      height: 100%;
  4      margin: 0;
  5      font-family: 'Helvetica Neue', Arial, sans-serif; /* Clean sans-serif font */
  6      background-color: #1e1f22; /* Dark background for the whole page */
  7      color: #e1e1e1; /* Light text for contrast */
  8  }
  9  
 10  /* Center the content and give it full height */
 11  .container {
 12      display: flex;
 13      flex-direction: column;
 14      height: 100%;
 15      padding: 20px;
 16      box-sizing: border-box; /* Ensure padding is included in height calculations */
 17  }
 18  
 19  /* Styling for the messages area */
 20  #messages {
 21      flex-grow: 1;
 22      padding: 15px;
 23      overflow-y: auto;
 24      border: 1px solid #333b41; /* Darker border */
 25      background-color: #2c2f36; /* Dark background for message container */
 26      border-radius: 10px;
 27      display: flex;
 28      flex-direction: column;
 29      gap: 10px; /* Space between messages */
 30      margin-bottom: 20px; /* Space between messages and input */
 31  }
 32  
 33  /* Styling each message */
 34  #messages p {
 35      padding: 10px;
 36      background-color: #444c56; /* Slightly lighter gray message bubbles */
 37      border-radius: 20px;
 38      max-width: 75%; /* Keep messages from stretching too wide */
 39  }
 40  
 41  /* Styling input and button area */
 42  .input-container {
 43      display: flex;
 44      gap: 10px;
 45      align-items: center;
 46      justify-content: flex-end; /* Align input and buttons to the bottom */
 47      width: 100%; /* Ensure it takes full width */
 48  }
 49  
 50  input[type="text"] {
 51      flex-grow: 1; /* Make the input take up remaining space */
 52      padding: 10px;
 53      border-radius: 20px;
 54      border: 1px solid #444c56; /* Dark border */
 55      background-color: #2c2f36; /* Dark background */
 56      color: #e1e1e1; /* Light text for input */
 57  }
 58  
 59  input[type="text"]:focus {
 60      outline: none;
 61      border-color: #4c8bf5; /* Light blue when focused */
 62  }
 63  
 64  button {
 65      padding: 10px 20px;
 66      border: none;
 67      border-radius: 20px; /* Rounded buttons */
 68      background-color: #4c8bf5; /* Signal's blue color */
 69      color: white;
 70      cursor: pointer;
 71      font-size: 16px;
 72  }
 73  
 74  button:hover {
 75      background-color: #3978d1; /* Slightly darker blue on hover */
 76  }
 77  
 78  button:active {
 79      background-color: #2962a1; /* Even darker blue when pressed */
 80  }
 81  
 82  /* Styling for the settings button inside the input container */
 83  #settingsButton {
 84      padding: 10px;
 85      border: none;
 86      border-radius: 20px; /* Rounded button */
 87      background-color: #4c8bf5; /* Signal's blue */
 88      color: white;
 89      cursor: pointer;
 90      font-size: 16px;
 91  }
 92  
 93  #settingsButton:hover {
 94      background-color: #3978d1;
 95  }
 96  
 97  #settingsButton:active {
 98      background-color: #2962a1;
 99  }
100  
101  /* Modal for settings (hidden by default) */
102  #settings {
103      display: none;
104      position: fixed;
105      top: 0;
106      left: 0;
107      width: 100%;
108      height: 100%;
109      background-color: rgba(0, 0, 0, 0.7); /* Dark background for modal */
110      justify-content: center;
111      align-items: center;
112  }
113  
114  .settings-content {
115      background-color: #2c2f36; /* Dark background for modal */
116      padding: 20px;
117      border-radius: 10px;
118      width: 300px;
119  }
120  
121  .settings-content h2 {
122      margin-top: 0;
123      color: #e1e1e1; /* Light text for headings */
124  }
125  
126  .settings-content button {
127      width: 100%;
128      margin-top: 10px;
129      background-color: #4c8bf5; /* Blue background for buttons */
130  }
131  
132  /* Styling for profile picture preview */
133  #profilePicPreview {
134      width: 100px;
135      height: 100px;
136      border-radius: 50%; /* Circular image */
137      margin-top: 10px;
138      object-fit: cover;
139      border: 2px solid #444c56; /* Dark border around the profile picture */
140  }