html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
}


.head-container {

  /* positioning */
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  /* position: fixed; */
  top: 0;
  left: 0;
  right: 0;
  margin: 10px;
  padding: 7px;
  

  box-shadow: 2px 4px 5px gray,
  -2px 4px 5px gray;
  text-align: center;
  font-family: Roboto;
  font-size: 30px;
}


/* Chat log */
.main-container {

  /* positioning */
  /* position: relative;
  top: 70px; */
  margin-top: 15px;
  padding: 10px;
  padding-bottom: 15px;
  /*border: 2px solid black;*/

  /* flex: 1 1 auto; */

  /* text formation */
  max-width: 100%;
  /* max-height: 85vh; */
  overflow-wrap: break-word;
  font-family: Roboto;

  /* fade */
  --fade-amount: min(15%, 40px);
  mask-image: linear-gradient(to bottom, transparent, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent);

  /* auto scroll */
  height: auto;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  
}




/* prompt input */


.chatbox-container {
  width: auto;
  text-align: center;
  /* border: 1px solid blue; */
  box-sizing: border-box;
  margin-top: 90px;
  margin-left: 12px;
  margin-right: 12px;
  margin-bottom: 22px;
}


.chatbox {
  
  /* positioning */
  /*border: 2px solid black;*/
  
  /* border: 1px solid red; */
  box-sizing: border-box;

  max-width: 90%;
  min-width: 30%;
  width: 100%;

  position: relative;
  display: inline-block;
  text-align: center;
}

/* input box */
.prompt-in {

  box-sizing: border-box;

  /* positioning */
  /* position: relative; */
  /* margin: 10px; */
  width: 100%;
  height: 75pt;
  vertical-align: top;
  padding: 8px;

  /* resize restrict */
  min-height: 72px;
  max-height: 100pt;
  resize: vertical;

  /* gradient and deco */
  background: /*linear-gradient(to bottom, lightgray, silver, darkgray),*/
  linear-gradient(to bottom right, silver, gray);
  border-radius: 10pt;
  
  font-family: Google Sans;
}




/* button */

.chatbox-button {
  /* positioning */
  position: absolute;
  right: 6px;
  bottom: 6px;

  /* deco */
  background: linear-gradient(to top left, silver);
  border-radius: 10pt;
  aspect-ratio: 1;
  height: 40%;
  border: none;

  /* animate */
  transition: transform 0.1s ease-in-out;
  transform: scale(1);
}



/* animation */

.chatbox button:hover {
  background: linear-gradient(to bottom right, silver, silver, gray);
}

.chatbox button:active {
  transition: transform 0.1s ease-in-out;
  transform: scale(0.9)
}