body {
        margin: 0;
        font-family: 'IBM Plex Mono', monospace;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: rgb(255, 255, 255);
      }

      .header-container {
        display: flex;
        align-items: center;
        position: absolute;
        top: 5px;
        right: 5px;
        gap: 5px;
        line-height: 2;
      }

      ._8020_agent_ {
        font-size: 0.8vw;
        color: rgb(0, 0, 0);
      }

      .ToggleButton {
        width: 16px;
        height: 16px;
        border-radius: 9999px;
        border: 1px solid rgb(0, 0, 0);
        background: rgb(0, 0, 0);
        transition: background-color 0.3s;
        cursor: pointer;
        outline: none;
      }

      .ToggleButton:last-child {
        background: transparent;
      }

      .ToggleButton.active {
        background: rgb(0, 0, 0);
      }

      #cursor-light {
        width: 40px;
        height: 40px;
        border-radius: 60%;
        position: fixed;
        pointer-events: none;
        background: radial-gradient(circle, pink 30%, transparent 90%);
        transform: translate(-50%, -50%);
        transition: left 0.1s, top 0.1s;
        filter: blur(8px);
        z-index: 9999;
      }


      .container {
        position: relative;
        padding: 60px 20px 20px 20px;
        border-radius: 10px;
        width: 60%;
        text-align: center;
      }

      .logo {
        position: absolute;
        top: 0px;
        right: 10px;
        width: 55px;
      }

      .input-container {
        position: relative;
        display: flex;
        align-items: center;
      }

      .input {
        width: 100%;
        padding-top: 10px;
        padding-left: 0px;
        padding-right: 30px;
        padding-bottom: 10px;;
        border: 0;
        border-bottom: 0.1px solid rgb(0, 0, 0);
        outline: 0;
        font-size: 13px;
        font-family: 'IBM Plex Mono', monospace;
        color: rgb(0, 0, 0);
        text-shadow: 0 0 5px rgba(38, 38, 38, 0.8);
        background: transparent;
        transition: 0.1s;
        resize: none;
        overflow: hidden;
        box-sizing: border-box;
        line-height: 1.5;
      }

      .input::placeholder {
        color: #282828;
      }

      .input:-webkit-autofill,
      .input:-webkit-autofill:hover,
      .input:-webkit-autofill:focus,
      .input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px transparent inset !important;
        box-shadow: 0 0 0 30px transparent inset !important;
        -webkit-text-fill-color: rgb(253, 253, 253) !important;
        font-family: inherit !important;
      }

      #output {
        margin-top: 20px;
        min-height: 40vh;
        max-height: 60vh;
        overflow-y: auto;
        padding: 5px;
        font-size: 13px;
        color: rgb(0, 0, 0);
        text-align: left;
        text-shadow: 0 0 5px rgba(38, 38, 38, 0.8);
      }

      #messages {
        position: absolute;
        top: calc(100% + 15px);
        left: 0;
        right: 0;
        margin: 0 auto;
        max-height: 200px;
        overflow-y: auto;
        font-size: 13px;
        color: rgb(0, 0, 0);
        text-shadow: 0 0 5px rgba(38, 38, 38, 0.8);
        animation: pulse 2s infinite;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.01);
          opacity: 0.4;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      #submit {
        position: absolute;
        right: 0;
        top: 0;
        background: transparent;
        border: none;
        cursor: pointer;
      }

      #submit img {
        width: 22px;
        height: 22px;
      }

      .response {
        color: rgb(30, 30, 30);
        font-size: 13px;
      }

      .userMessage {
          font-weight: bold;
      }

      .error {
        color: red;
      }

      #mobile-warning {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent;
        color: #333;
        z-index: 1000;
        text-align: center;
        font-size: 13px;
        border: 2px solid #fff;
        padding: 20px;
        width: 80%;
      }

      #mobile-warning .logo {
        position: absolute;
        top: -50px;
        right: 10px;
        width: 100px;
      }

      #mobile-warning p {
        color: #fff;
      }

      @media screen and (max-height: 768px) {
        
        .giant-text {
          font-size: 50vh;
        }
        #messages {
          bottom: 30vh;
        }
      }

      @media screen and (max-height: 400px) {
        .giant-text {
          font-size: 30vh;
        }
        #messages {
          bottom: 20vh;
        }
      }

      @media screen and (max-width: 767px) {
        

        #output {
          display: none;
        }

        #messages {
          display: none;
        }

        .giant-text {
          display: none;
        }

        .talk-to-data {
          display: none;
        }

        #mobile-warning {
          display: block;
        }
        
        .container {
          display: none;
        }
      }