body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f0f0f0;
  transition: background-color 0.3s, color 0.3s;
  background-image: url("Light\ Mode\ BG.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.dark-mode {
  background-color: #333;
  color: #fff;
  background-image: url("Dark\ Mode\ BG.png");
}
h1 {
  color: #333;
}
body.dark-mode h1 {
  color: #fff;
}
#loginForm,
#signupForm,
#messageForm {
  width: 80%;
  max-width: 800px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: background 0.3s, color 0.3s;
}
body.dark-mode #loginForm,
body.dark-mode #signupForm,
body.dark-mode #messageForm {
  background: #22222275;
  color: #fff;
}
#loginForm input,
#signupForm input,
#message {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: background 0.3s, color 0.3s;
}
body.dark-mode #loginForm input,
body.dark-mode #signupForm input,
body.dark-mode #message {
  background: #222222cb;
  color: #fff;
  border: 1px solid #666;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #0056b3;
}
body.dark-mode button {
  background-color: #01a78e;
}
body.dark-mode button:hover {
  background-color: #008d78;
}
#messages {
  width: 80%;
  max-width: 800px;
  overflow-y: auto;
  height: 400px; /* Adjust height as needed */
}
#messages p {
  background: white;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: background 0.3s, color 0.3s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 1px, solid, #444;
}
body.dark-mode #messages p {
  background: #444;
  color: #fff;
}
#countdown {
  margin-left: 10px;
  color: red;
}
body.dark-mode #countdown {
  color: #ff6666;
}
body.dark-mode a {
  color: rgba(0, 247, 255, 0.918);
}
#disclaimerButton {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
body.dark-mode #disclaimerButton {
  background-color: #01a78e;
}
#disclaimerButton.expanded {
  width: 100%;
  max-width: 800px;
  padding: 20px;
  background-color: #d9534f;
  text-align: center;
  white-space: normal;
}
body.dark-mode #disclaimerButton.expanded {
  width: 100%;
  max-width: 800px;
  padding: 20px;
  background-color: #d9534f;
  text-align: center;
  white-space: normal;
}
#disclaimerButton.expanded::after {
  content: ": This website has no association with Bombay Scottish School Mahim. The messages sent do not reflect the administrator's views, and users are responsible for their own messages. Users may be banned by the administrator with no reason ascribed.";
}
input:focus,
textarea:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

button:active {
  transform: scale(0.98);
}

html {
  scroll-behavior: smooth;
}

#messages {
  overflow-y: auto;
  height: 400px;
  padding-right: 10px; /* Ensures scrollbar does not overlay content */
  box-sizing: border-box;
}

#messages p {
  margin-bottom: 10px;
  background: white;
  padding: 10px;
  border-radius: 5px;
  transition: background 0.3s, color 0.3s;
}

body.dark-mode #messages p {
  background: #222222cb;
  color: #fff;
  border: none;
}
#messages::-webkit-scrollbar {
  width: 8px;
}

#messages::-webkit-scrollbar-thumb {
  background-color: #007bff;
  border-radius: 4px;
}

body.dark-mode #messages::-webkit-scrollbar-thumb {
  background-color: #01a78e;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#messages p {
  animation: fadeIn 0.3s ease-in-out;
}

/* Sidebar Styles */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: #f8f9fa;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: background-color 0.3s, color 0.3s;
  overflow-y: auto; /* Vertical scrolling when content overflows */
}

body.dark-mode #sidebar {
  background-color: #22222275;
}

/* Adjust body padding to accommodate sidebar */
body {
  padding-left: 270px; /* Add padding to body to make space for the sidebar */
}

body.dark-mode {
  color: #fff;
  background-color: #333;
}

.chat-button1,
.chat-button2,
.chat-button3 {
  background-color: rgb(39, 39, 39);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 30px; /* Makes the button rounded */
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  display: block;
  width: calc(100% - 20px); /* Takes up full width with some margin */
  margin: 20px auto 0; /* Centers the button horizontally and adds top margin */
}

#toggleSidebar {
  display: none; /* Hidden by default */
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1001; /* Ensure it's above other content */
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px; /* Adjust padding for better size */
  border-radius: 5px;
  cursor: pointer;
  font-size: 24px;
  width: auto; /* Ensure width fits the content */
  height: auto; /* Adjust the height to fit content */
  transition: background-color 0.3s;
}

/* For tablets and mobile phones */
@media (max-width: 768px) {
  body {
    padding-left: 0; /* Remove padding to make space for the sidebar */
  }

  #toggleSidebar {
    display: block;
  }

  #sidebar {
    width: 100%; /* Sidebar takes up full width on small screens */
    height: auto; /* Allow the sidebar to adjust height based on content */
    position: relative; /* Remove fixed positioning */
    padding: 10px; /* Reduce padding */
  }

  .done-button {
    width: 100%; /* Button takes up full width */
    margin-top: 10px;
  }

  #loginForm,
  #signupForm,
  #messageForm,
  #messages {
    width: 100%; /* Forms take up full width */
    max-width: none; /* Remove the maximum width */
  }

  #messages {
    height: auto; /* Allow messages to grow with content */
    max-height: 400px; /* Optional: Set a max-height to control scrolling */
  }

  h1,
  h2 {
    font-size: 1.5em; /* Adjust font sizes */
  }

  button {
    width: 100%; /* Make buttons full-width */
    margin-bottom: 10px;
  }

  input,
  textarea {
    width: 100%; /* Make inputs full-width */
  }

  #disclaimerButton {
    width: 100%; /* Full-width button */
    margin-bottom: 10px;
  }
}

/* For very small screens (e.g., phones in portrait mode) */
@media (max-width: 480px) {
  h1 {
    font-size: 1.2em;
  }

  h2 {
    font-size: 1em;
  }

  button {
    padding: 8px 15px; /* Smaller padding for buttons */
    font-size: 14px;
  }

  #messages {
    height: 300px; /* Reduce the height of the message container */
  }
}

@media (max-width: 768px) {
  #sidebar {
    display: none; /* Hide sidebar by default on mobile */
  }

  #sidebar.open {
    display: block; /* Show when the menu button is clicked */
    position: fixed; /* Make it appear over the content */
    z-index: 1000; /* Ensure it is above other content */
  }

  #toggleSidebar {
    display: block; /* Show a button to toggle sidebar */
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1001; /* Above the sidebar */
  }
}

/* Mobile-specific styles for the sidebar */
@media (max-width: 768px) {
  #sidebar {
    display: none; /* Hidden by default */
    width: 100%; /* Full width of the screen */
    height: 100%; /* Full height of the screen */
    background-color: rgba(0, 0, 0); /* Dark overlay */
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1000; /* Make sure it’s above other content */
    box-shadow: none;
    transition: transform 0.3s ease; /* Slide-in transition */
    transform: translateX(-100%); /* Start off-screen */
  }

  #sidebar.open {
    transform: translateX(0); /* Slide in from the left */
    display: block; /* Show the sidebar */
  }

  body.sidebar-open {
    overflow: hidden; /* Prevent background scrolling */
  }

  .chat-button1,
  .chat-button2,
  .chat-button3 {
    width: calc(
      100% - 40px
    ); /* Full width with some margin on smaller screens */
    max-width: none; /* Remove max-width on mobile for full responsiveness */
    font-size: 18px; /* Optionally adjust font size for better readability on mobile */
    margin-left: 0;
  }

  body {
    margin-right: 0;
  }

  body.dark-mode #sidebar {
    background-color: #000000;
  }
}