body, html { width:100%; height:100%; max-width: 800px; margin: auto; position: relative; background-color: dimgray; color: white; }
    #avatar { display: block; width:100%; height:100%; }
    #controls { display: block; position: absolute; top: 10px; left: 10px; right: 10px; height: 50px; }
    #text, #gptInput { position: absolute; width: Calc( 100% - 110px ); height: 100%; top: 0; left: 0; bottom: 0; right: 110px; font-family: Arial; font-size: 20px; }
    /*#speak, #submitGPT { position: absolute; top: 0; bottom: 0; right: 0; height: 100%; width: 100px; font-family: Arial; font-size: 20px; }*/
    #loading { display: block; position: absolute; bottom: 10px; left: 10px; right: 10px; height: 50px; font-family: Arial; font-size: 20px; }
   /* #gptInput { top: 60px; } !* Position the GPT input below the existing text input *!
    #submitGPT { top: 60px; right: 0px; } !* Position the GPT submit button next to the GPT input *!*/

    /* Make input bigger specifically on iPhones and similar devices */

 
    .gpt-container {
      display: flex;
      align-items: center;
      border: 2px solid #00f2fe;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 6px 12px rgba(0, 242, 254, 0.5);
      background: #1a1a1a;
      height: 63px;
    }
   #timingResultsWrapper
   {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
   }
   #stopSpeechButton
{
  background: none;
    border: none;
    font-size: 1.5em;
    margin-left: 10px;
}
    #gptInput {
      border: none;
      padding: 15px;
      font-size: 16px;
      outline: none;
      background: #1a1a1a;
      color: #00f2fe;
      font-family: 'Orbitron', sans-serif;
      caret-color: #00f2fe;
      position: relative;
      padding-top: 1em;
    }
     #gptInput {
      width: calc(100% - 100px);
     /* padding: 10px; */
      font-size: 16px;
      white-space: pre-wrap; /* Allow wrapping */
      overflow-wrap: break-word; /* Handle word wrapping */
    }
    #gptInput::placeholder {
      color: #00c0b9;
      opacity: 0.7;
    }
    
    #gptInput2
    {
      border: none;
      outline: none;
      background: rgb(26, 26, 26);
      color: rgb(0, 242, 254);
      font-family: Orbitron, sans-serif;
      caret-color: rgb(0, 242, 254);
      width: calc(100% - 100px);
      padding-left: 20px;

    }
    #gptInput2::placeholder {
      color: #00c0b9;
      opacity: 0.7;
    }
   

    #submitGPT {
      border: none;
      background: #00f2fe;
      color: #1a1a1a;
      padding: 15px 20px;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
      outline: none;
      font-family: 'Orbitron', sans-serif;
      height: 100%;
      font-size: 20px;
    }

    #submitGPT:hover {
      background: #00c0b9;
     /* transform: translateY(-2px);*/
    }


/* Shrink text if it overflows */
#gptInput:focus {
  font-size: min(16px, 2.5vw); /* Adjust font-size based on viewport width */
}
#avatar-loading
{
  position: fixed;
    bottom: 0px;
    color: black;
    font-size: 1.6em;
    font-family: 'Pacifico', cursive;
}
.auto-height {
  resize: none;
  overflow: hidden;
  font-size: 16px;
  padding: 10px;
  box-sizing: border-box;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

/* Vertically centers text initially */
.auto-height.single-line {
  display: flex;
  align-items: center;
}
   




.option-container{
  margin-top: 20px;
}

.option-button {
  border: 2px solid #00f2fe;
    background-color: transparent;
    color: #00f2fe;
    padding: 10px 20px;
    border-radius: 30px;
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    margin-right: 20px;
}

.option-button:hover {
  background-color: #00f2fe;
  color: #1a1a1a;
}
.option-checkbox {
  align-items: center;
  margin-left: 10px;
  color: #00f2fe;
  font-family: 'Orbitron', sans-serif;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border-radius: 0.15em;
  color: #00f2fe;
}
.option-checkbox input
{
  width: 1em;
    height: 1em;
    transform: scale(1.5);
    accent-color: #00f2fe;
    margin-right: 0.5em;
}

      #startSpeech
      {
        background: none;
        border: none;
        font-size: 1.5em;
        color: white;
        margin-right: 5px;
      }
@media (max-width: 1200px) {
      #gptInput {
        font-size: 1em !important;
        /* padding: 1.5em 0.4em 0em 0.4em !important; */
      }
      #gptInput2
      {
        font-size: 20px;
      }
      .gpt-container {

          height: 5em !important;
      }
      .option-checkbox {
        display: inline-block;
        margin-top: 10px;
        width: fit-content;
      }
      .option-button
      {
        padding: 5px 5px  !important;
        margin-right: 0px !important;
        font-size: 0.7em !important;
      }
     
    }