body {
  background-image: url(/img/_BG_0_ERIRI.jpg); 
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.box {
  height: 100vh;
  /* margin-bottom: 1rem; */
}

.user-input {
  margin-top: 1rem;
  width: 100%;
  min-height: 1rem;
  max-height: 5rem;
  /* border: 1px solid saddlebrown; */
  /* left: 0;
      top: 0; */
  display: flex;
}

.user-input textarea {
  word-break: break-all;
  resize: none;
  flex: 4;
  border-radius: 15px;
  border: 1px solid rgb(135, 181, 241);
  background-color: #ffffffcd;
  color: dodgerblue;
  font-size: 1rem;
}

.user-input textarea:hover {
  border: 1px solid dodgerblue;
}
.user-input textarea:focus {
  border: 1px solid dodgerblue;
}

.user-input button {
  margin-left: 1rem;
  /* color: pink; */
  background-color: #ffffff7a;
  border: 1px solid rgb(135, 181, 241);
  border-radius: 15px;
  font-size: 2rem;
  padding: 1rem;
  flex: 0.5;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.user-input button:hover {
  background-color: #ffffffcd;
  border: 1px solid dodgerblue;
}

.history-box {
  height: 80%;
  width: 100%;
  background-color: rgba(240, 248, 255, 0.942);

  overflow-y: auto;
  overflow-x: auto;

  word-wrap: break-word;

  border-radius: 15px;
  font-size: medium;
}

.chat-history {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.chat-history .message-user {
  /* width: 70%; */
  background-color: rgba(171, 150, 255, 0.6);
  text-align: right;
  
  margin-top: 1rem;
  margin-bottom: 1rem;

  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.3rem;

  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;

  border-top-right-radius: 15px;
  border-bottom-right-radius: 0px;
}

.chat-history .message-user::before {
  content: "You";
  color: green;
}

.chat-history .message-assistant {
  /* min-height: 3rem; */
  background-color: rgba(190, 85, 255, 0.6);

  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.3rem;

  border-top-left-radius: 15px;
  border-bottom-left-radius: 0px;

  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.red_backg {
  background-color: rgba(255, 100, 100, 0.558);
}

.chat-history .message-assistant::before {
  height: 2rem;
  width: 2rem;
  background-image: url(/icons/EririBall.svg);
  background-size: contain;
  display: block;
  content: "";
  border-radius: 15px;
  color: rgb(255, 100, 100);
}

.chat-history .special-btn {
  color: rgba(255, 100, 100, 0.74);
  display: block;
  background-color: #ffffffec;
  border-radius: 10px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  /* width: 3rem;
  height: 2rem; */
}

.chat-history .special-btn:hover {
  color: rgba(255, 100, 100, 0.914);
  background-color: #ffffff;
}

.message-assistant pre {
  /* background-color: rgba(255, 251, 240, 0.986); */
  border-radius: 15px;
  overflow-y: auto;

  padding: 0.5rem;
}

/* .message-assistant pre code {
  border-radius: 15px;
} */

.message-assistant * img {
  height: 3rem;
  display: inline;
}

.sdxl-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  /* margin: auto; */
  /* height: 100%; */
  /* width: 100%; */
}

.sdxl-box .user-input {
  /* height: 6rem; */
  /* width: 100%; */
  max-width: 512px;
}

.img-show-box {
  /* height: 80%; */
  width: 100%;
  max-width: 512px;
  aspect-ratio: 1/1;
  background-color: rgb(255, 252, 246);
  display: flex;
  align-items: center;
  border-radius: 25px;
  overflow: hidden;
}

.img-show-box img {
  width: 100%;
  /* height: 1024px; */
  object-fit: contain;
}


button.busying {
  background-image: url(/icons/loading-Ellipsis@1x-1.0s-200px-200px-transp.svg);
}

button.availiable {
  /* height: 100%;
  width: 100%; */
  /* object-fit: contain; */
  background-image: url(/icons/icons8-紙飛行機-96-1.png);
}