/* Reset some default styles for a clean slate */
body,
html {
 margin: 0;
 padding: 0;
 height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

/* Dark theme styles */
body {
 background-color: black; /* Dark background for dark mode */
 color: lime; /* Light text color for readability */
 font-family: "Arial", sans-serif;
 font-size: 16px;
}

h1 {
 text-align: center;
 color: #c59655;
}

/* Container for the content */
.container {
 margin: 0 auto;
 padding: 20px;
 max-width: 800px; /* Adjust the width as needed */
}

/* Style for file input and text input */

input[type="file"] {
 width: 100%;
 height: 40px;
 padding: 10px;
 margin: 10px 0;
 background: #262626; /* Slightly lighter than the body background */
 border: 1px solid #333333; /* Border color for input */
 border-radius: 4px;
 color: #ffffff;
 font-size: 16px;
 padding-left: 20px;
 padding-right: 20px;
}

input[type="text"],#textInput {
bottom: -25px;
position: fixed;
height: 40px;
width: 100vw;
background-color: #111;
border-top: 1px solid #555;
padding-left: 30px;
padding-right: 30px;
left: 50%;
transform: translateX(-50%);
color: white;
  margin: 30px;
  font-size: 16px;
}

/* Placeholder color */
input[type="text"]::placeholder {
 color: #555555;
 font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Image preview styles */
#imagePreview img {
 width: 50%;
 height: auto;
 margin-top: 15px;
 margin-bottom: 15px;
 border: 2px solid #c59655;
  border-radius: 4px;
}

/* Output box styles */
#output {
 background: black; /* Dark background for the output box */
 border: none; /* Border color for the output box */
 border-radius: 4px;
 padding: 20px;
 margin-top: 20px;
 white-space: pre-wrap; /* Keeps the formatting of JSON or other preformatted text */
 overflow: auto;
 width: 100%;
}

/* Ensure that the elements are not stuck to the top of the page */
.container {
 padding-top: 30px; /* Adjust the padding to increase or decrease the space from the top */
}

.user-message {
 margin-bottom: 20px; /* Adds space below the user message */
}

.assistant-message {
 color: #4caf50; 
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: rga (0,0,0,0.4);
}

select {
 width: 100%;
 height: 50px;
 padding: 10px;
 margin: 10px 0;
 background: #222222; /* Slightly lighter than the body background */
 border: 1px solid #555555; /* Border color for input */
 border-radius: 4px;
 color: #ffffff;
 font-size: 25px;
 text-align: center;
}

footer {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}

footer p {
  font-size: 12px;
  color: #555;
}

#api-key-status {
  text-align: center;
  margin-top: 85px;
  margin-bottom: 5px;
  font-weight: lighter;
  color: lime;
  top: 10px;
  position: fixed;
  font-size: 15px;
}

#api-icon {
   position: fixed;
   top: 5%;
   right: 5%;
   width: 25px;
   height: 25px;
   cursor: pointer;
   z-index: 400;
 }

#idea {
   position: fixed;
   top: 5%;
   left: 5%;
   width: 25px;
   height: 25px;
   cursor: pointer;
   z-index: 400;
 }

#api-icon {
   position: fixed;
   top: 5%;
   right: 5%;
   font-size: 25px;
   cursor: pointer;
   z-index: 400;
 } 
#translate-icon {
  position: fixed;
   bottom: 40%;
   right: 3%;
   cursor: pointer;
   z-index: 9999999;
}

#waiting-gif {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  width: 250px;
  height: 250px;
  z-index: 600;
}

#link-icon {
  position: fixed;
   bottom: 30%;
   right: 3%;
   cursor: pointer;
   z-index: 9999999;
}